HTML5　Canvasでアニメーション　【入門編　第６回】

気分転換におそばせながらHTML5を触ってみました。パッと見た感じでわかりやすいもので、ブラウザの対応状況も進んでいるという
「Canvas」を使ってみることにします。
これまではグラフィックの描画にはAppletやFlashなどを使用しなければなりませんでしたが、そういったものを使用せずとも
ブラウザに描画することができるものです。ただしJavascriptを使わなければなりません。

とりあえず何か動くものをと考えたところ、帰宅時に近所で見かけたものを題材にしました。
見えてるでしょうか？

※一応、噴火花火のつもりですが表現力が足りません。もっと色等わけるべきなんやとおもいます。

今回はかなり手抜きなものでコードもぐちゃぐちゃですが、Canvasを使用することでこういったアニメーションができます。
そこでアニメーションのさせ方に関して説明したいと思います。

アニメーションさせたい場合、パラパラ漫画をイメージしてもらえるといいと思います。
一枚の画像を描画して、少し座標を動かしたものをまた描画、座標を動かしてまたまた描画を繰り返します。
このとき最初の画像を消さないとすべて描画されるので流れとしては以下の繰り返しを行うプログラムを
作成すればよいわけです。

画面に描画–>画面の消去–>変化させて描画–>画面の消去

この切り替えをどのくらいの頻度で行うかによりアニメーションの滑らかさなどが変わります。
1秒間に60フレームだと滑らかな映像ということになるようです。しかし今回のようなものだとそこまでは必要ないだろうと
いうことで50ミリ秒ごとに描画を行っています。
では順を追ってみていきます。