HTML5 canvas を利用して画像変換が可能なお絵かきツールを作ってみた

HTML5 の canvas であれこれとサンプルを作っていくうちに、簡単なお絵かきツールくらいだったらすぐに作れそうだと、早速サンプル作成してみたところ、これがまた意外にもあっさりと作ることができた。

さらには、描いたイラストをPNG画像にも変換ができるようにもしてみた。

⇒サンプルを見る（別ウインドウ）

javascript のコードはすこーし長めになってしまったんで割愛。気になる人はサンプルページで HTML ソースを確認してもらえればと。

基本的にはマウスイベントでマウスが押している状態か押していない状態かをフラグで判別。マウスを押している時は、マウスが移動する度に、その座標に対して円の描画を行う。

あくまでも簡易なので、マウスをビシャァーっと動かすと、点がぽつらぽつらと描画されてしまうのは愛嬌だと思っていただければ幸い。この辺を補完処理して描画できると、よりお絵かきツールっぽいんだけどねー。そんな高度なことは今はちと厳しいっス。

あとは、おまけ程度にラジオボタンで線の太さを切り替えられるようにしてみた。

canvas に描画された画像に変換するのも、このtoDataURL() メソッドを使用すれば簡単に処理を行える。

何気なく Fireworks とかで画像ファイルを開いてみたら、ちゃんと透過情報も保持されていた！

こりゃあ、便利だねー。

参考情報

toDataURL() メソッド（canvas を画像に変換） - Canvasリファレンス - HTML5.JP

この記事をブックマークしておく