[HTML5 canvas] 複数オブジェクトのアニメーションとマウス制御

本来は Flash がメインとなるブログのはずなんだが、ついつい HTML5 の canvas が小っちゃい Flash っぽく手軽に作れるので、あれこれと触ってみたくなってしまう。

それに actionscript も javascript も親戚みたいな感じだから、どちらで作っても、同じような書き方なで、どっちでもいいやー、みたいな。むしろ旬は html5 だろ、みたいな

んで、今回も同様に HTML5 の canvas でアニメーションさせるサンプル作り。

⇒サンプルを見る（別ウインドウ）

よくある雪が降る雰囲気のアニメーション。

今まではひとつの形を動かす程度だったんだけども、雪、というからには、いくつか複数の白い円、そしてランダム要素のある動きが必要となってくる。

canvas の場合は、Flash みたいにシンボルなどがあるわけではないので、配列を使ってオブジェクトの属性などを計算処理させていくはず。そして、その配列をループ処理させて描画していく感じだよね。きっと。

ついでにオマケ機能として、雪にマウスカーソルを近づけると、マウス付近の雪オブジェクトが大きくなっていくという、特に意味無いインタラクティブ動作を実装してみた。

あと、ふとした印象で、実際にはどうかは良く分からない感覚的な印象なんだけども、いちいち描画をクリアにするより、上書きで描画していった方が処理が早いような気もした。
もちろん、何か数値とか計測したわけではないので、ただの気のせいかもしれないけどね（汗）

HTML5 Canvas and Audio Experiment

かなり心地よいモーションが堪能できる HTML5 Canvas のデモサイト。

いちおう、こんな有名なデモサイトもあるんだけど、これだけ円の数が多くてもサクサクと動くんだよね。

基本は同じような仕組みなのか？それとも高速化とかちょっとしたテクニックがあるのか？

コードをパッと見た感じはサッパリなんだけども、時間があったらじっくりと解析してみたいなー。

この記事をブックマークしておく