html5+canvasでペイント
2010.05.25 Tuesday 01:05
今流行のhtml5とcanvasを使ってペイントツールを作ってみた。
javascriptでここまで出来てしまうのかと驚くばかり。
今のところの仕様
・鉛筆ツール
太さと色が変えられます。
・塗りつぶしツール
囲まれてる部分を選択した色で塗りつぶします。
このスピードで動くようになるまでにはかなりの苦労がありますた(;´Д`)
最初に作ったツールは全面を塗るのに2分かかってたんだぜwww
・矩形ツール
矩形で囲みます。
囲むだけで特に何もしませんwww
コピペとか作ろうかと思ったがちょっと後回し。
・Undo機能
鉛筆ツール、塗りつぶしツールが一回だけやり直せます。
今のところは特にライブラリっぽくせずにhtmlにベタ書きです。
機能追加とともにそのうちライブラリ化したいところ。
動作確認はFirefox3.6.3、Safari4.0.5で行ってます。
Operaでは塗りつぶしツールがうまく動きません。(無限ループに陥るので注意!)
Internet Explorerはhtml5のcanvasタグがまだ実装されていません。
↓ここから試してみてね
canvas.html
javascriptでここまで出来てしまうのかと驚くばかり。
今のところの仕様
・鉛筆ツール
太さと色が変えられます。
・塗りつぶしツール
囲まれてる部分を選択した色で塗りつぶします。
このスピードで動くようになるまでにはかなりの苦労がありますた(;´Д`)
最初に作ったツールは全面を塗るのに2分かかってたんだぜwww
・矩形ツール
矩形で囲みます。
囲むだけで特に何もしませんwww
コピペとか作ろうかと思ったがちょっと後回し。
・Undo機能
鉛筆ツール、塗りつぶしツールが一回だけやり直せます。
今のところは特にライブラリっぽくせずにhtmlにベタ書きです。
機能追加とともにそのうちライブラリ化したいところ。
動作確認はFirefox3.6.3、Safari4.0.5で行ってます。
Operaでは塗りつぶしツールがうまく動きません。(無限ループに陥るので注意!)
Internet Explorerはhtml5のcanvasタグがまだ実装されていません。
↓ここから試してみてね
canvas.html

