setIntervalとrequestAnimationFrameの比較

setIntervalとrequestAnimationFrameはJavaScriptにおいて周期的に動作を繰り返すメソッドです。
今回はこの二つのメソッドの比較のためのスクリプトを作りました。







draw1はsetIntervalを用いており、20ミリ秒ごとに1pxの描写を繰り返します。

draw2はsetIntervalを用いており、10ミリ秒ごとに1pxの描写を繰り返します。

draw3はrequestAnimationFrameを用いており、1秒ごとに1回1pxの描写を60回行います。

draw4はrequestAnimationFrameを用いており、1秒ごとに1回2pxの描写を60回行います。


setIntervalは時間を指定して描写を行っていて、requestAnimationFrameはブラウザの動作に合わせて毎秒60回の描写を行っています。
アニメーションをJavaScriptで作成する場合、ブラウザに合わせて動作するrequestAnimationFrameがスムーズに描写できるようです。