Canvasでアニメーションをする

Canvas（JavaScript）をマスターするためにがんばってます。

JavaScriptも全然わかっていないのですが、Canvasはビジュアルがあって理解しやすいと思い、いきなりCanvasに手をつけています。

アニメーションする

今回は、アニメーションです。
アニメーションは、Canvasの醍醐味のうちの1つです。

以下のコードを使います。

window.requestAnimationFrame(function);

functionの関数の中に「window.requestAnimationFrame()」を入れます。

どうやって説明したらいいの・・・
MDNには以下です。

コールバックがリクエストした window.requestAnimationFrame() の呼び出しにより返された ID 値。

window.cancelAnimationFrame

説明を見たところで何もわからないですが（泣）、こんな感じです。

function loop() {
	
	// コード

	window.requestAnimationFrame(loop);
}

私は、「window.requestAnimationFrame(loop)」にきたら、「function loop()」に戻ると理解しました。

赤い四角が左右に言ったり来たりする

function render() {
	loop();
}

function loop() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// background
	ctx.fillStyle = '#aaa';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// rect
	ctx.fillStyle = 'red';
	ctx.fillRect(x, 110, 30, 30);

	if (x < 0 || x > canvas.width) {
		d = d * -1;
	}
	x = x + 10 * d;

	window.requestAnimationFrame(loop);
}

ブラウザでみたい方は下の私の個人サイト↓を見てください。愛想のないサイトですが。。。