requestAnimationFrameのfps制御

JavaScriptでのrequestAnimationFrameの引数をタイムスタンプとして、それを参照することでスクリプトの動作のタイミングを操作することができます。
それを応用してrequestAnimationFrameを用いた描写のfpsを制御することができます。





このスクリプトは通常の60fpsのrequestAnimationFrameの描写と、30fpsと設定したrequestAnimationFrameの描写を比較したものです。
draw1が60fps、draw2が30fpsとなります。

fpsの制御方法は、描写開始時の時間baseTimeを0として、requestAnimationFrameで描写するmove2の描写した時間をnowTimeとしてrequestAnimationFrameのタイムスタンプを取得します。
ここでnowTimeとbaseTimeの差をcountTimeとして、このcountTimeが指定したfpsの一回の描写以上の時間、つまり1000ミリ秒/fpsとなれば描写を行います。
そしてnowTimeを新しいbaseTimeとして次のnowTimeをrequestAnimationFrameのタイムスタンプから取得して次の描写を行います。

draw1は60fpsで1px、draw2は30fpsで2pxで動く描写を行っていて見掛け上は同じような動きを見せる描写になるはずです。
しかし実際にはdraw2が遅れて描写されるように見えます。これは制御自体にブラウザの動作のリソースが割かれているためだと考えられます。
requestAnimationFrameを用いた描写はあくまで60fpsで動くことを前提に設定するのがいいのかもしれません。もしくはsetIntervalメソッド等を利用して描写の頻度を設定する方法もあります。