HTML5でお絵かきツール

この記事は公開から１年以上経過しており、内容が古くなっている可能性があります。

HTML5のCanvasを使ってお絵かきツールv0.5を作ってみました。

ベースはASCⅡ.jpのこちらの記事を参考に作成。そこに「カラーピッカー.js」や「rgbcolor.js」を投入し、「Canvas Painter」というサイトのソースを参考にさせてもらいながら作りました。

ファイヤーフォックスでしか動かない、レイアウトが雑、ツールの機能がまだ不十分（特に不透明度・ブラシ（ぼかし））など問題点が多々ありますが、一応上げてみます。

お絵かきツールv0.5サンプル　[新しいウィンドウで開く]　（Firefox3.6以上でのみ正常動作します）

ソースはこちら

※ソースについて

今回、自分で改良したファイルは

• examples/index.html
• draw/draw.js
• rgbcolor/rgbcolor.js　（this.toRGBに引数を付け加えただけ）

だけです。

その他については上記で掲載したサイトからダウンロードしたり、載っていたソースをそのまま使用しています。

制作にあたり、今回は以下のサイトを参照させていただきました。

HTML5.jp：該当ページ「Canvas」「Javascript ライブラリー」

ASCⅡ.jp：該当ページ「HTML5のCanvasで作る、Flash不要のお絵かきツール」

もやし日記：該当ページ「色表現を変換するJavaScriptライブラリ – rgbcolor.js」