2009/11/23－2010/03/04 HTML5 の Canvas と JavaScript を使って簡単なお絵かきをしてみる。 はじめの一歩・マウスイベントを拾って描画する◎ TestCanvasMouseEvent01.html （2010/03/04 HTML5） HTML5 Canvasのサンプル で紹介しているサンプル。 内容は簡単な塗り絵のサンプルです。マウスでドラッグすると描画します。  HTML／JavaScriptでは部品やマウスの座標がややこしくなります・・・Google 検索で「div、座標」ぐらいで検索してみてください。div の座標を得るあたりからややこしくなる。 ◎ TestCanvas_Paint01.html （2010/03/04 HTML5） 上のサンプルに画像消去ボタンやデバッグ表示のテキストエリアをつけたもの。  描画のずれをなくすため、Canvas をウインドの左上 (0,0) につめています。また、ウインドのスクロールを禁止にしています。 これを土台にしていろいろ足してみます。 筆の色を変えられるようにしてみるJavaScriptボタン入力処理 で紹介している TestJS色選択1_1.html を上のサンプルに付け足してみます。 ◎ TestCanvas_Paint02.html （2010/03/04 HTML5）  さらに付け足すサンプル： TestCanvas_Paint05.html （2010/03/04 HTML5） 筆の太さも変えてみる。  ちょっと動作が重い。点ではなくて線で結んだ方がよさそう。 ツールパネルも一応ドラッグ移動できるのだけど、色パレットを表示しているときはとても重く、タブ３のときは軽くなる。 PC とブラウザの処理能力のベンチマークになるかも？。 色選択は、プログラム生成せずカラーパレットの画像を何枚か用意して、カーソル座標の色を拾うようにした方がてっとり早いという話もある・・・。 筆のぼかしもつけてみるか？。 描画情報（軌跡やペンの設定など）を記録し、履歴の画像バッファを何枚か用意すると、undo などの操作もできる。ただまあ、理屈は簡単だけど、やるのは面倒くさい・・・。 その他いろいろ◎ツールパネルをタブ切り替え式にするには？ こちらにいい資料がある。 All About：ページ移動せずに内容を変更するタブを作る 項目がいっぱいあるツールメニューもわりと簡単にできそう。 JavaScript マウス入力処理 div のドラッグ移動とタブ切り替えのサンプル。 ◎番外編：画像を保存するには？。 Firefox で Canvas の部分で右クリックメニューを出すと「名前を付けて画像を保存」などのメニューがある。ただま、Canvas上で右クリックするとこれも描画してしまう・・・、いい方法を考えてください。 ◎ファイルの読み書きが鬼門 JavaScript はブラウザ上で動く関係で、ローカルファイルの読み書きが難点です。ファイルのアップロードのダイアログはあるけど、ブラウザ上には読めないとか （Firefoxを除く）、ユーザが手動で操作する明示的なファイルの保存方法がややこしくなるなど。 ◎ネイティブでサポートするフィルターがあると便利かも。 HTML5 Canvas にコンボリューションフィルター（行列フィルター）をネイティブで処理する API があると便利。ちょっとしたレタッチぐらいまでは Web上でできてしまうかもしれない。 コンボリューションフィルターとは何ぞや？ Java 画像処理・フィルター編 に説明があります。 ◎HTMLソースファイルを分割するには？ ここで悩む。HTMLファイルを適度な部品の単位で分割したいのだが、いい方法が分からない・・・。js や css は分割できるのだけど、HTML 自体をツールパネルなど適当な単位で分割したい。このあたりは、JavaやC# など本格的な言語と比較するとかなり面倒くさい。そのままだと、ソースの使いまわしのしにくい巨大なスパゲティプログラムになりやすい。 HTMLファイルの分割 ◎上の話を本格的にお絵かきツールにしたもの http://mugtug.com/sketchpad/ Sketchpad という HTML5 Canvas を使ったお絵かきツールが紹介されている。  Firefox や Safari では透過度つきの半透明の div が使える。 |