筆圧対応HTML5簡易ペイントツール作ってみた

Google+でフォローしてる人からPointerEventなるものを教えてもらったのでその機能を使って簡易ペイントツールを試作。オリジナルソースはその人。(改造・拡張した)

(全画面版)

http://jsfiddle.net/lumis/x9z4t/15/embedded/result/

(ソース付き)

http://jsfiddle.net/lumis/x9z4t/15/

主な機能:

・ペン、エアブラシ(もどき)、消しゴム (グラディエーションペンは未実装)

・IEでもカラーピッカー使用可能にした

・無制限UNDO

・画像出力・保存(状態確認ボタン)

・筆圧対応

・ペンタブの消しゴム(ペンのおしりの)対応


まあ正直ちゃんとしたペイントツールとは程遠いし、絵描きさんたちがギリギリ困らないレベルの機能しか揃ってないと思うけど、HTML5で筆圧感知してここまで出来るというサンプル程度に認識してもらえれば。

やる気とその他アイデアを貰えれば本格的にウェブアプリ化してみる・・・かも。

この記事が気に入ったらサポートをしてみませんか?