利用HTML 5和JavaScript创建绘图应用
让我们来创造一个可以让使用在html5 canva标示元素上动态画图的网页应用,我们的使用者
将需要用到什么工具呢?我脑海中第一个想到的是上色本,用蜡笔来上色,所以第一个
工具就是蜡笔。虽然在真实世界是没办法把蜡笔擦掉,但是我想我们的应用需要可以擦
掉蜡笔,因此第二个工具就是擦布。因为我是一个SharpieR迷(译:文具品牌),所以我们最后一
个工具将是奇异笔。
我们的工具应该可以选择颜色(除了擦布),为了保持简要,所以我们只开放四种色彩
给我们的使用者从中选择。
相同地,也提供四种不同大小的尺寸让用户作图,归纳我们应用应该有的元素:
*3个工具:蜡笔,奇异笔,擦布
*4种色彩以便选择
*4种大小来应用
就像一本上色本子一样,让我们给用户们一个可以上色的对象。我最喜欢的就是:
Rachel Cruthirds 的 Watermelon Duck (译:西瓜小鸭,也可以选择哈密瓜小熊)。
准备 HTML5 Canvas:标示
只要一行代码就可以完成canvas标示元素的建立:其它将以脚本实现。
1 |
|
等下。。。HTML5 目前来讲还算新的技术而有些浏览器(?... 就是说你的IE)不支持
canvas标签,所以用以下代码来代替:
1 |
|
准备 HTML5 Canvas: 脚本撰写
为了可以使用我们的canvas元素,我们希望透过其id来获取画布上下文内容以进行存取:
1 |
|
然而IE并没有法解析canvas标签,所以如果使用以标示的方法IE将会以错误来处理。
代替的方案就是用JavaScript来创建canvas元素然后附加到我们的canvasDiv p。
1 2 3 4 5 6 7 8 9 10 |
|
Internet Explorer compatibility we will also have to include an additional script: ExplorerCanvas.
为了IE的兼容性问题,我们必须添加额外的脚本:
创健基本画图功能:
在我们添加各种选项之前,先让我们完成HTML5 canvas动态画图的基本功能。这个部份
将包含四个鼠标事件和两个函数:addClick()用来纪录鼠标数据,
redraw()函数将会绘制那些资料。
Mouse Down 事件:当用户在canvas点击时我们将会透过addClick()函数把鼠标位置
纪录在一个数组中,并把一个paint布郎变量设置成true(稍候将会解释)。最后我
们用redraw()函数更新canvas画布。
1 2 3 4 5 6 7 |
|
Mouse Move 事件:就像笔尖在纸张上移动一样,当用户按住左键时我们想要把他画在canvas画布上。布郎变量paint可以使我们知道这支虚拟的笔状态是在触碰纸面还是在空中。
如果paint直为true我们就把鼠标数据记录并绘制出来。
1 2 3 4 5 6 |
|
Mouse Up 事件:笔尖离开纸面;paint布郎变量负责记录。
1 2 3 |
|
Mouse Leave 事件:如果笔尖整个离开纸的区域,那就让我们忘了你的存在,所以也是把paint设置成false。
1 2 3 |
|
以下是addClick函数的实现,用来记录鼠标按下的位置:
1 2 3 4 5 6 7 8 9 10 |
|
redraw()函数是魔法发生的地方,每当redraw()被调用时,整个canvas会被清空而重新绘制鼠标数据。
实际上我们可以只要重绘制新的区域,这样做的效能会更好,但是我们还是让事情简单一点。
我们设置一些有关笔的属性,颜色,型状和宽度。
之后就是绘制我们纪录的鼠标数据,从第一笔资料绘制一条线到第二笔的位置,以此类推。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
添加大小选项
就像我们刚刚添加颜色选项一样,也让我们添加一些可以选择的大小:小,中,大和超大。
我们也需要一组全局变量:clickSize数组和curSize用来储存当前大小选择。
1 2 |
|
addClick()函数也需要改变,每当用户点击时记录所选择的大小
1 2 3 4 5 6 7 8 |
|
改动redraw()函数让其支援笔刷大小设置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
添加工具
我们来实现蜡笔,奇异笔和擦布吧。
我们需要两个新的全局变量:clickTool和curTool。
1 2 |
|
先修改addClick()函数,当用户选择工具时,纪录其值。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
- 也改动redraw()函数让其支持新的工具。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
添加轮廓图案
上色本都会提供一个轮廓图案让我们上色,像是可爱的小狗仔或是蹦蹦跳的兔子,而我则选择西瓜小鸭。..
首先宣告 outlineImage 图案变量
1 |
|
加载轮廓图档
1 2 3 4 5 |
|
改变我们的redraw()函数,利用canvas属性context的drawImage()方法来绘制我们的轮廓图。
drawImage()函数的参数:我们加载的image对象,我们想要绘制轮廓图的纵横位置以及其长宽大小。
1 2 3 4 5 |
|
最终细节
接近完成我们的应用了,最终细节是可选择性的:限制可以作画的方型区域和利用其余的位置制作我们的GUI (按钮)
透过屏蔽canvas元素让画图只会显示在画纸的区域。这个实现用到了clip(),save()和restore方法。目前IE并不支持这些方法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
- 最后一个步骤就添加按钮,这包括先加载按钮图案然后再显示出来让我们可以交互。这个实现我是利用标准的JavaScript技术,所以我就不废话连篇了(如果你想知道的话你可以去源代码中查)。以上就是整个教程。
以上就是利用HTML 5和JavaScript创建绘图应用的内容,更多相关内容请关注PHP中文网(www.php.cn)!

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。
