HTML5のCanvasを使ったお絵かきツールまとめ


昔、お絵かき掲示板というものをよく閲覧していたのですが、最近はめっきり見なくなりました。今考えると結構すごい機能があったけど、FlashやJAVAアプレットだからiPadとかでは使えないんだよなぁ。なんて思っているとCanvasでお絵かきアプリ (全8回) – プログラミングならドットインストールというレッスンがあるのを見て、突然HTML5のCanvasで作ったお絵かき掲示板を作ってみたいと思うようになりました。

いや、でもそもそもすでにCanvasで作られたお絵描きツールはあるんじゃないかと思い、調べてみたらすでにいろいろある模様。以下、見つけたもののリスト。

イラストブック – 無料レンタルお絵かき掲示板
今回見つけたもののなかで最もお絵かき掲示板っぽかったもの。普通にChromeで見てみるとかなり高機能なFlashを使ったお絵かきツールになるのですが、ChromeのUserAgentをiPadに変更したらCanvasで作られたお絵かきツールを見ることができました。
Canvas Painter
描画の軌跡を記録できるのが特徴のお絵描きツール。線や四角や円がドラッグしてる最中にも描画できるというのは正直どうやっているのかよく分からない。ただ、投稿どころか画像に変換する機能すらなさそう。また、タッチパネル対応でもない様子。
なお、このサイトは下記記事で見つけました。
ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール (1/5)|古籏一浩のJavaScriptラボ
rails3 + html5 canvasでお絵かき投稿サイトを作ろう! | KRAY Inc
Drawing
Canvasを使ったお絵かき掲示板を作るのには一番ためになりそうなサイト(Coffee Scriptはよく分からないけど)。投稿された画像をクリックするとCanvasに反映されるよう。ただこれもタッチパネルには対応してなさそう。
WingMemo: HTML5でお絵かきツールを作ってみた
お絵かき
透明度や背景透明の設定が面白い。ブラシの種類も多い。タッチパネルには対応してないよう
Canvasお絵描きアプリ – YoheiM.NET
なんとレイヤー機能つき。Canvasで作られたお絵描きツールをいろいろ探してみたけど、レイヤー機能をもってるのはこれしか見つからなかった。ただ、四角を描く時にドラッグ時に描画されない。タッチパネルには非対応のよう。
JavaScriptで比較的本気でお絵描きアプリを作ってみた | fladdict
JavaScriptで作ったお絵描き掲示板のソースを公開するよ | fladdict
JSPaint runs except IE
すごい高機能。色の選択が本格的。散布ブラシと指先は全くどうやってるのか思いつかない。ズーム機能まである。
オープンソースのHTML5お絵かきウィジェット「Literally Canvas」:phpspot開発日誌
About — Literally Canvas v0.3-rc2 documentation
基本的な機能のみをもったお絵描きウィジェットらしい。タッチパネル対応のよう。文字入力機能がある。上記のphpspotのページを見てみると関連エントリに似たようなエントリへのリンクがあった。
Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」:phpspot開発日誌
お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」:phpspot開発日誌
wPaint.jsがすごいよさそう。塗りつぶし機能もあるし、タッチパネルにも対応してる。

純粋なお絵かき掲示板機能をもったCanvasで作られたお絵描きツールは少なそうですが、canvasで作られたお絵描きツールはいろいろあるようです。
うーん。それにしても、jQueryプラグインがあるのか。実装するとしたら、そのプラグインを使ったうえで足りないところ(投稿機能など)は自分で追加していくという形をとるのが一番簡単かな。
いやでも、勉強用にいろいろやってみようかな。すぐに挫折しそうな気もするけど。

さて、いろいろCanvasで作られたお絵描きツールを見てきたけど、お絵かき掲示板の代表格の『しぃペインター』のほうがまだまだ高機能な印象です(参考:しぃペインターの使い方(しぃペインター講座))。
一部分のコピー機能を実装したCanvasのお絵描きツールというのはないのだろうか。

コメントを残す

メールアドレスが公開されることはありません。