前回に引き続き、canvasタグでブラウザ上で図形作成中。
今回はアニメーションに挑戦してみます。と入っても、Javascriptで描いている図形のこと、Javascriptでループすれば簡単にアニメーションが作れるのは道理。
ただ、単にループせず、setInterval()を使ってループ時間は調整する。
サンプルをアップしてみましたので、ソースのご参考までに。
「canvas」タグアーカイブ
[Canvas] Canvasタグを勉強しよう。
HTMLだけで、図形が描ける<canvas>タグ。正直、コーポレートサイトやポータルサイト・ショッピングサイトばかりの職場では使うことが当分なさそうなので興味なかったのですが、よく考えてみたらかなり面白いんじゃね？と思い直して勉強してみることにしました。
これまでもFlashやProcessingなどを勉強しようと思いながら始められなかったのですが、canvasの魅力はやっぱりプラグイン無しでブラウザで動くということに尽きる。IE？知らん。
ということでまず、図形を描いてみました。Firefox、Safariで見てください。
IEでは動きません。あしからず。
左上が基準点。そこからポインタを動かして線を引いたり図形を置いたり。こういっちゃ何だが、実にありきたりです。おおまか、CSSと発想が一緒と思えば取っ付きやすいかな。
その他、描線と塗りに色を指定できる、透明度が設定できる、グラデーションが設定できる、と。
アニメーションが出来ると聞いて俄然やる気になったので、次回はそのあたりを調べてみます。