setIntervalメソッドを用いたアニメーション作成

今回は時間経過とともに変化する描写、つまりアニメーションを作りたいと思います。
そのためにここではsetIntervalメソッドを用います。


setIntervalメソッドは指定した時間間隔で処理を繰り返すメソッドで次のように用います。

setInterval (関数名,時間間隔)

ここでの時間間隔はミリ秒です。
例えばsetInterval (draw,1000) というコードはdraw関数を1秒ごとに繰り返すというコードになります。


前回用いたコードにsetIntervalメソッドを加えて動的な描写を行うようにしてみました。
ただし、ただ繰り返すだけでは前の描写が残りcanvas内を塗り潰す動きになります。
ここでclearRectメソッドを用います。
これは範囲内を矩形にくり抜くメソッドですが、言い換えればその範囲の描写をまっさらにするともいえます。
clearRectメソッドを用いれば前の描写を残さずにそれぞれの処理のみの描写を表示させることができます。
今回のコードは前回と同じくcanvas内にランダムな位置に三つの矩形が描写されるものですが1秒ごとに矩形が再描写されます。