[JavaScript] HTML5 Canvas の使い方とアニメーション作成

1. canvas とは？

canvas　は、HTML5に導入された新しい要素で、ページ上に「描画エリア」を作成するためのものです。

このタグを使うと、JavaScriptを使って動的にグラフィックやアニメーションを描くことができます。

例えば、画像や図形、ゲームのグラフィックなどを描画する際に利用されます。ゲームのシューティング弾やキャラクター、背景など、すべてをキャンバスで描くことができます。

2. canvasの基本的な使い方

canvas タグ自体は、特に描画を行わない「空のキャンバス」です。
描画するためには、JavaScriptを使って操作を行います。

HTML側

<canvas id="gameCanvas"></canvas>

JavaScript側

まず、キャンバスにアクセスして描画を行うためには、次のようにします。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');  // 2Dコンテキストを取得

getContext('2d')で2D描画を行うための「描画コンテキスト」を取得します。このctxを使って、キャンバス上にさまざまな描画を行います。

3. 基本的な描画メソッド

キャンバスに描画する基本的なメソッドを紹介します。

1. 四角形を描く

ctx.fillStyle = 'red';  // 色を指定
ctx.fillRect(50, 50, 100, 100);  // (x, y, width, height)
  • fillRect(x, y, width, height)で、指定した位置に四角形を描画します。
  • fillStyleで塗りつぶしの色を指定できます。

2. 線を描く

ctx.beginPath();  // パスの開始
ctx.moveTo(50, 50);  // 始点を指定
ctx.lineTo(150, 150);  // 終点を指定
ctx.stroke();  // 線を描画
  • beginPath()で新しいパスを開始します。
  • moveTo(x, y)で始点を指定。
  • lineTo(x, y)で線の終点を指定し、stroke()で線を描きます。

3. 円を描く

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);  // (x, y, radius, startAngle, endAngle, counterClockwise)
ctx.fill();
  • arc(x, y, radius, startAngle, endAngle, counterClockwise)で円を描きます。

4. テキストを描く

ctx.font = '30px Arial';
ctx.fillText('Hello World!', 50, 50);
  • fillText(text, x, y)でテキストを描画します。
  • fontでフォントのサイズや種類を指定できます。

4. アニメーションの作成

canvas では、リアルタイムでアニメーションを描くことができます。JavaScriptでアニメーションを作成するためには、requestAnimationFrame()を使います。

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 画面をクリア
  // 描画処理
  requestAnimationFrame(gameLoop);  // 次のフレームをリクエスト
}

gameLoop();  // ループを開始
  • clearRect(x, y, width, height)で画面をクリアします。これにより前のフレームが消え、新しいフレームを描画できます。
  • requestAnimationFrame()で次のフレームをリクエストし、アニメーションループを作成します。

5. イベント処理

canvas は、ユーザーとのインタラクションを処理することができます。例えば、マウスやキーボードの入力を検出することができます。

1. マウスイベント

canvas.addEventListener('click', function(event) {
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;
  console.log(`クリック位置: ${x}, ${y}`);
});
  • clickイベントで、ユーザーがクリックした位置を取得できます。

6. キャンバスのサイズ変更

キャンバスのサイズは、CSSで指定することができますが、widthとheightはJavaScriptで変更することも可能です。

canvas.width = 800;
canvas.height = 600;

また、CSSでも指定できますが、widthとheightを直接設定しないと、描画のサイズに影響が出る場合があります。

7. レスポンシブ対応

canvas をレスポンシブに対応させるためには、CSSでサイズを指定することが多いですが、JavaScriptでキャンバスのサイズを動的に変更することもできます。

const canvas = document.getElementById('gameCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

このように、ウィンドウのサイズに合わせてキャンバスを調整することができます。

8. 実用例：簡単なシューティングゲーム

以下は、簡単なシューティングゲームのたたき台です。ゲームの進行や物理演算はまだ簡素ですが、キャンバスを使った描画の基本が学べます。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// プレイヤーの描画
let playerX = canvas.width / 2;
let playerY = canvas.height - 50;
let playerWidth = 50;
let playerHeight = 50;

function drawPlayer() {
  ctx.fillStyle = 'blue';
  ctx.fillRect(playerX, playerY, playerWidth, playerHeight);
}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 画面をクリア
  drawPlayer();  // プレイヤーを描画
  requestAnimationFrame(gameLoop);  // アニメーションループ
}

gameLoop();  // ゲームを開始

9. まとめ

canvas を使えば、ブラウザ内で簡単にグラフィックやアニメーションを描画することができます。

シューティングゲームやインタラクティブなアプリケーションを作成するための基盤として非常に強力です。

これからHTML5でゲーム開発やインタラクティブなコンテンツを作りたいと思っている方にとって、canvas は欠かせないツールとなるでしょう。