前のページ(サンプル wiki)へ / 次のページ(インターフェース)へ
ドット絵を描くサンプルを作ってみました。
下のパレットをクリックすると現在の色がその色に変わります。
後はキャンバス内でマウスの左ボタンを押しながら動かすと
その軌跡に沿って線が描かれます。
描き終わったら題名を付けて書き込むと
内容がサーバに保存されます。
同様に題名を指定して読み込むと以前の絵が表示されます。
Firefoxでしか試していませんので注意。
Firefox だけでなく IE と Opera でも動くように直しました。
(もちろん、ときどき DB を初期化します)
(download)
手法としては table に小さな td 要素を並べておき 各 td にイベントを設定して色を変えることで絵を描いています。 position:absolute を使えばキャンバスを無視して描けるのですが、 それはちょっとシリアライズが面倒だと思ったのでこうなりました。 もちろん Java や flash を使った方が軽くて実用的です。 これはあくまでもサンプルだと思って使ってください。
どのようなデータでも適切に文字列化すれば http 上のメッセージとして転送することが出来る というのがこのサンプルの要点です。 ここではかなり手抜きしたフォーマットを使っているので 転送量がかなり大きくなってしまっています。 ちなみに実際に使われている gif や jpeg などの圧縮形式も 画像を一定の規則によってビット列に変換することで作られています。 画像をこれらの圧縮形式に変換すれば もっと転送を軽くすることが出来るでしょう。
ただ私の環境で見る限りは転送よりも描画に時間が取られているようです。 まあ 64 * 64 = 4096 もの要素を持った table ですから レンダリングに時間がかかるのは仕方ないのかもしれません。 でもブラウザごとの癖を利用して描画を速くする方法はありそうです。 innerHTMLで描いたら速くなるのでしょうか？ table 自体の幅を与えたら速くなるのでしょうか？ 本格的に利用するならば一通りベンチマークした方が良いですね。
修正です。 encodeURIComponet() するべきところを encodeURI() していました。 投稿内容が + などの記号を含むときに 途中で分割されてしまうことがあったのを修正しました。
現在の色