HTML5 Canvasを使ったフレームごとの（コマ送り）アニメーションの実装方法

HTML5 Canvasでフレームごとのアニメーションを作成する

HTML5のCanvas要素を利用すると、複数の画像ファイルを一定間隔で順番に切り替えて描画するだけで、手軽にコマ送り（フレームごと）のアニメーションを実現できます。Flashなどのプラグインに頼らず、JavaScriptだけでも滑らかなアニメーションが作れるのが魅力です。

以下は、Canvas上で連番の画像を読み込み、パラパラ漫画のようにアニメーションを再生するシンプルなサンプルコードです。

var myImageNum = 1;   // 現在表示中の画像番号
var lastImage = 5;    // 最後の画像番号

var context = canvas.getContext('2d');
var img = new Image;

// 画像が読み込まれたらCanvasを更新
img.onload = function(){
    context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
    context.drawImage( img, 0, 0 );
};

// 15fps（約66ミリ秒間隔）で画像を切り替えるタイマー
var timer = setInterval( function(){
    if (myImageNum > lastImage){
        clearInterval( timer );   // 最後まで再生したら停止
    }else{
        img.src = "images/left_hnd_" + ( myImageNum++ ) + ".png";
    }
}, 1000/15 );

コードの仕組みを解説

このコードのポイントは次の3つです。

• 変数の初期化： myImageNumが現在のコマ番号、lastImageが最終コマ番号です。この例では「left_hnd_1.png」から「left_hnd_5.png」までの5枚の画像を順に表示します。
• 画像の描画処理： img.onloadイベント内で、まずclearRect()によって前のコマを消去し、その後drawImage()で新しい画像をCanvasに描画します。これにより残像が出ません。
• タイマー処理： setInterval()を使い、「1000 / 15」＝約66ミリ秒ごとに画像を切り替えます。これは1秒間に15枚（15fps）を表示することを意味します。src属性を変更すると自動的にonloadが発火し、次のコマが描画されます。

カスタマイズのヒント

より高フレームレートのなめらかなアニメーションにしたい場合は、1000/15の「15」を「30」や「60」に増やしてください。また、ループ再生させたい場合は、clearInterval()の代わりにmyImageNumを1に戻すことで、最初のコマから繰り返し再生できます。