HTMLだけで、図形が描ける<canvas>タグ。正直、コーポレートサイトやポータルサイト・ショッピングサイトばかりの職場では使うことが当分なさそうなので興味なかったのですが、よく考えてみたらかなり面白いんじゃね？と思い直して勉強してみることにしました。

これまでもFlashやProcessingなどを勉強しようと思いながら始められなかったのですが、canvasの魅力はやっぱりプラグイン無しでブラウザで動くということに尽きる。IE？知らん。

ということでまず、図形を描いてみました。Firefox、Safariで見てください。
IEでは動きません。あしからず。

• 直線を描く
• 曲線を描く
• 四角形を描く

左上が基準点。そこからポインタを動かして線を引いたり図形を置いたり。こういっちゃ何だが、実にありきたりです。おおまか、CSSと発想が一緒と思えば取っ付きやすいかな。

その他、描線と塗りに色を指定できる、透明度が設定できる、グラデーションが設定できる、と。

アニメーションが出来ると聞いて俄然やる気になったので、次回はそのあたりを調べてみます。