Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
![requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4624047e19481b1979d0eccc889f1f299ec2d55/height=288;version=1;width=512/https%3A%2F%2Fyomotsu.net%2Fassets%2Fimg%2Fog-image.png)