Canvasで線を引いてみる

HTML5になったこのサイトで少し実験。ヘッダの絵、カラスがくわえる紐をCanvasで描いてみました。速度面にもほとんどメリットはないと思いますが、線の質がかなりきれいなことがわかりました。これは収穫。

大まかに対応内容を。

• canvasタグを記述。絵を描く範囲の指定。今回は一部画像に重ねるので、CSSでレイヤーの順番なども指定。
• JavaScriptに数字でベジェ曲線を記述（ベジェ曲線ってこういう順序で書いていたのか）。はやくFireworksなんかでJavaScriptの出力ができるようになって欲しい。色はもちろん、線の太さも1以下で指定可能。ちなみに上の紐の太さは「0.5」。
• IEに対応させるためのJavaScript「excanvas.js」を読み込む。

やっぱり今のままでは絵を描く工程がネック。いい出力ツールが出てくれると、装飾のためのGIF画像なんかがいらなくなりそう。
でも、CanvasをCSSで使用できそうなのはWebkit（Safari、Chrome）だけだったり、そう簡単ではないのかも。ソース内にcanvasタグが散在するのも良くないし。

この記事を書きながら見つけたカヤックさんのブログの背景もcanvasタグでした。ただリロードの度に書き換えらる背景がきれいすぎます。

長谷川が参考にしたサイトは「Canvas – HTML5.JP」。基本的なところはよくわかります。でもこういうサンプル画像は武骨なせいで想像力が働かなくなります。小さい頃に見たMSX（BASIC）のマニュアルもそうでした。何ができるかを他のサイトで見てからの方がよさそう。