一風変わったCanvasのドローアプリ クロウラーキャンバス
HTML5のCanvasを使って簡単なドローアプリを作りました。従来のドローアプリみたいにマウスやペンタブを使って絵を描くのではなく、ポインターをキーで操縦しながら描いていきます。画面上をクリックするとポインターがウネウネと動き出して描画を始めます。 触角のような三本のガイドラインがポインターについていて、進行方向や現在の旋回速度によって描かれる曲線の目安が分かります。
クロウラーキャンバスの操作方法
左クリック： ポインターの前進
右クリック： ポインターのバック
「A」キー： 左旋回
「D」キー： 右旋回
「W」キー： 線を太く
「S」キー： 線を細く
「Shift」キー： 旋回を急に
「Ctrl」キー： 旋回を緩やかに
「B」キー： ぼかしモードのオンオフ切り替え
スペースキー： 描画モードのオンオフ切り替え
バックスペース： アンドゥ機能（一度アンドゥを行うとそれ以前の状態には戻せません）
Internet Explorer 8でも一応動作しています。ExplorerCanvasの描画が思わしくないので、 uupaaさんのuuCanvas.jsを初めて導入しました。自分の環境ではSilver Lightで描画されており、Canvasよりきれいに見える。これはすごい！ また、 画像の保存機能はまだ用意してないですが、後に再編集できるよう、ページ下のフォームで画像データをJSON形式でデータを出力できるようにしました。 データを読み込むときはフォームにデータをペーストし、「キャンバス上にデータを反映」をクリックします。Firefoxの最新のバージョンでは右クリックでCanvas内のグラフィックを保存できるようです。左下の「右クリック可に！」をクリックするとコンテキストメニューが復活します。
クロウラーキャンバス
動作確認： Firefox3.6 Chrome6.0 IE8