JavaScriptでCanvasを使用してグラフィックスを描画する方法

HTMLでCanvasを作成する

最初に、HTMLファイル内にCanvas要素を作成します。Canvasは、幅と高さを持つ要素であり、JavaScriptコードによって描画された内容を表示します。

<canvas id="myCanvas" width="500" height="300"></canvas>

JavaScriptでCanvasを取得する

次に、JavaScriptコード内でCanvas要素を取得します。これには、getElementByIdメソッドを使用します。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

図形を描画する

Canvasの主な目的は、図形や画像を描画することです。以下に、いくつかの基本的な図形の描画方法を示します。

• 線を描画する:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.stroke();

• 四角形を描画する:

ctx.fillRect(50, 50, 100, 100);

• 円を描画する:

ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.stroke();

スタイルと色の設定

Canvasに描画する図形のスタイルや色を設定することもできます。以下に、いくつかの例を示します。

• 線の色を設定する:

ctx.strokeStyle = "red";

• 四角形の塗りつぶし色を設定する:

ctx.fillStyle = "blue";

• 線の太さを設定する:

ctx.lineWidth = 3;

アニメーションの作成

Canvasを使用してアニメーションを作成することも可能です。以下に、基本的なアニメーションの作成方法を示します。

function draw() {
  // Canvasをクリアする
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // アニメーションの描画コードをここに追加する

  // アニメーションの更新
  requestAnimationFrame(draw);
}

// アニメーションを開始する
draw();

イベントの処理

Canvas上でのマウスのクリックやキーボードの入力などのイベントを処理することも可能です。以下に、マウスクリックイベントの例を示します。

canvas.addEventListener("click", function(event) {
  const x = event.clientX - canvas.offsetLeft;
  const y = event.clientY - canvas.offsetTop;

  // マウスクリック位置での処理をここに追加する
});