HTML5 canvasを使用してみる～簡単なアニメーション

イメージをタイルシートにするとパラパラ漫画風のアニメーションを作成できます。

簡単な例で試してみましょう。上のタイルシートの中の２つのイメージとdrawImage()メソッドを使用してアニメーションを作成します。

2枚のイメージ画像を交互に表示するとgifアニメのような効果が得られます。
その方法として、2枚のイメージ画像に番号を付けます。1枚目は０、2枚目は１とします。０と１を一定時間で入れ替えるようにすればよいのです。

この仕組みをプログラム的に書くと以下のようになります。

var count = 0;
counter++;
if(counter > 1){
counter = 0;
}

次にタイルシートのそれぞれの画像の表示したい部分をx座標、y座標で指定します。1行だけのタイルシートならx座標の指定だけでＯＫです。たとえば32pxの画像が横に並んでいる場合だと最初の画像はx座標０pxで2枚目の画像はx座標32pxとなります。これをプログラム的に書くと先ほどの　counterの値「１」か「０」に32pxを掛けてやります。

32*counter;

一定時間で動作を繰り返すにはsetInterval()メソッドを使います。

setInterval(drawScreen,100)

drawScreenは自分で作成した関数になります。100ミリ秒ごとにdrawScreen()に設定した内容を実行します。

以下は実際の例です。色の違う花を交互に表示するものです。

サンプルページはこちら

HTMLのソースです。

<div>
	<canvas id="canvas" width="200" height="200">
	Your browser does not support the HTML 5 Canvas. 
	</canvas>
</div>

JavaScriptのソースです。

window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {

	canvasApp();

}


function canvasApp(){

	if (!canvas || !canvas.getContext) {
		return;
	}else{
		var theCanvas = document.getElementById('canvas');
		var context = theCanvas.getContext('2d');
	}

	var counter=0;
	var myFlowers=new Image();
	myFlowers.addEventListener('load', eventFlower, false);
	myFlowers.src="flower4.png";

	function eventFlower() {
		startUp();
	}

	function drawScreen() {

		//draw a background so we can wee the Canvas edges
		context.fillStyle="#00ffff";
		context.fillRect(0, 0, 500, 500);
		context.drawImage(myFlowers, 128*counter, 0, 128, 128, 30, 30, 128, 128);
		counter++;
		if (counter >1) {
			counter=0;
		}
	}

	function startUp(){

		setInterval(drawScreen, 700);
	}
}