HTML5 Canvas アニメーション

HTML5 canvas上に画像アニメーション効果を描画する場合、各フレームの画像を描画し、非常に短い時間内に一フレームから次のフレームに移行して、アニメーション効果を作成する必要があります。

オンラインサンプル

HTML5キャンバス上にアニメーションを描画する場合、キャンバス上でアニメーションのフレームを描画し、再描画する必要があります。これを非常に速く行う必要があります。多くの画像がアニメーションのように見えるようにするためです。
アニメーションが最高のパフォーマンスを発揮するようにするため、requestAnimationFrameはwindowオブジェクト上でコールバック関数を使用します。この関数を呼び出し、ブラウザがアニメーションの次のフレームを描画する準備ができたときに呼び出すべき別の関数を引数として渡すことができます。
ブラウザが次のフレームを描画する準備をする際、ブラウザがアプリケーションにシグナルを送信することで、アニメーションをハードウェアアクセラレーションで有効にし、ブラウザ内の他の再描画アクティビティとフレームの再描画を調整することができます。JavaScriptのsetTimeout()関数を使用してアニメーションフレームの描画を計時するよりも、全体的な体験ははるかに良いでしょう。
これはコードの例です:

function　animate()　{
　　　　reqAnimFrame　=　(window.webkitRequestAnimationFrame　||
　window.mozRequestAnimationFrame　||
　window.oRequestAnimationFrame　||
　window.msRequestAnimationFrame　||
　function(callback)　{
　　var　self　=　this,　start,　finish;
　　return　window.setTimeout(function()　{
　　　start　=　+new　Date();
　　　callback(start);
　　　finish　=　+new　Date();
　　　self.timeout　=　1000/60　-　(終了　-　start);
　　}, self.timeout);
　});
　　　　reqAnimFrame(animate);
　　　　draw();
}

animate()関数は、requestAnimationFrame()関数への参照を取得します。この関数は、異なるブラウザで異なる名前を持っている場合があります。変数reqAnimFrameをnullでない可能性のあるすべてのこれらの関数に設定します。
次に、reqAnimFrame()は関数を呼び出し、animate()関数を引数として渡します。したがって、ブラウザが次のフレームを描画する準備ができたら、animate()がその関数を呼び出します。
第3に、animate()関数はdraw()関数を呼び出します。draw()は上記の例では表示されていません。この関数は、まずキャンバス（またはクリアする必要があるキャンバスの数）をクリアし、次のアニメーションフレームを描画するべきです。
上記の例では表示されていないことですが、animate()は一度だけ関数を呼び出す必要があります。そうしないと、requestAnimationFrame()は関数を呼び出しませんし、アニメーションループは決して始まりません。
これはキャンバス上に動く単一の矩形のアニメーションサンプルです:

Canvasアニメーションを実現するコードは以下の通りです:

<canvas　id="ex1"　width="500"　height="170"　style="border:　1px　solid　#cccccc;">
HTML5　Canvas　not　supported
</canvas>
<script>
var　x　=　　0;
var　y　=　15;
var　speed　=　5;
function　animate()　{
reqAnimFrame　=　(window.webkitRequestAnimationFrame　||
　window.mozRequestAnimationFrame　||
　window.oRequestAnimationFrame　||
　window.msRequestAnimationFrame　||
　function(callback)　{
　　var　self　=　this,　start,　finish;
　　return　window.setTimeout(function()　{
　　　start　=　+new　Date();
　　　callback(start);
　　　finish　=　+new　Date();
　　　self.timeout　=　1000/60　-　(終了　-　start);
　　}, self.timeout);
　});
reqAnimFrame(animate);
x　+= speed;
if(x <= 0 || x >=　475{
speed =　-speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, y,　500,　170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y,　25,　25);
}
animate();
</script>