キャンバス上でのグラフィックのアニメーション化
JavaScriptとHTMLの<canvas>
タグを使って、キャンバス上でアニメーションを作成することもできます。キャンバス上で移動する四角形のアニメーションを作成しましょう。
<!doctype html>
<html>
<head>
<title>Animated Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 20;
let y = 20;
const dx = 5;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(x, y, 50, 50);
if (x + 50 > canvas.width || x < 0) {
dx = -dx;
}
x += dx;
}
animate();
</script>
</body>
</html>
上記のコードでは、まずID「myCanvas」でキャンバス要素を取得し、その後getContext()
を使って2次元描画コンテキストを取得します。そして、四角形の位置を保持するための変数x
とy
を宣言します。また、四角形をx
軸に沿って移動させるための変数dx
も宣言します。
次に、画面上に四角形を描画するための関数animate()
を作成します。各フレームでキャンバス上の前の描画をクリアするためにclearRect()
メソッドを使用します。そして、fillRect()
メソッドを使って四角形を赤色で塗りつぶします。
その後、四角形がキャンバスの境界に達したかどうかを確認し、そうであればdx
の値を変えることで移動方向を変えます。
最後に、アニメーション用のループを作成するためにrequestAnimationFrame()
メソッドを呼び出します。
ファイルを保存し、ブラウザを更新してアニメーションされた四角形を確認しましょう。