一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

canvasで簡単なお絵かきアプリをつくってみた

今回はcanvasで簡単なお絵かきアプリをつくったときのことを書きたいと思います。

まず出来上がったサンプルはこちら↓
http://jsfiddle.net/danimal141/y3N8t/1/embedded/result/


黒画面部分がcanvasでこのエリアでマウスを押した状態で動きまわると線が描かれます。
んで、横のCLEARボタンを押すと、canvasがクリアされます。


では全体の流れを見て行きたいと思います。

まずHTMLのほうですが、
canvasタグを用意してwidth、height、JSで取得するためのidも指定。
あとはcanvasにお絵かきした後、それをクリアするためのボタンも用意しました。


次にJavaScriptについて。

まず、getElementByIdでcanvasを取得し、canvasが使える環境かどうかをif文で確認します。
んでそれがfalseじゃなかったら、getContextメソッドcanvasAPIにアクセスできるオブジェクトを取得します。これで準備完了!!


今回の場合、mousedown,mousemove,mouseupの3種類のイベントに対してそれぞれ処理を登録していきます。それぞれの処理は大体こんな感じです。


mousedownの処理

canvas描画開始(今回はdrawflagという変数を用意して、これの真偽を切り替えて判別しました)。
mousedownした座標を取得し、canvasの始点とします。

mousemoveの処理

始点から終点までの軌跡を描画(beginPath〜closePathまで)。
描画後は終点を始点にセットしなおして、mouseupされるまでそれを繰り返す。


mouseupの処理

canvas描画終了。


あとはクリアボタンのクリックイベントにcanvas.clearRectを指定してやれば完成。

canvasは普段、仕事で使うことはなかなか無いのですが、こうやって使ってみるとやっぱり楽しいです。

今回は簡単なお絵かきアプリを作りましたが、また別のアプリもcanvasでつくってみたいと思います。
がんばろー

小さなことからコツコツと。