Canvasでオブジェクトを移動するにはどうすればいいですか？

Canvas API でオブジェクトを移動する方法

Canvas API を使用すると、JavaScript を用いて動的なグラフィックを描画することができます。この強力な API を使用すると、ゲーム、アニメーション、データの視覚化など、さまざまなインタラクティブなアプリケーションを作成できます。

Canvas 上に描画されたオブジェクトを移動するには、いくつかの方法があります。この記事では、最も一般的な 2 つの方法である、マウスによるドラッグアンドドロップとキーボード操作について詳しく説明します。

1. マウスによるドラッグアンドドロップ

オブジェクトの位置を簡単に移動するには、オブジェクトの内側へマウスを移動すると図のような十字のマウス・ポインターになるので、ドラッグアンドドロップすると自由に移動することができます。

マウスによるオブジェクトのドラッグアンドドロップ

この方法を実装するには、以下の手順に従います。

マウスダウンイベントをリッスンします。
マウスダウンイベントが発生したら、マウスの現在の座標を取得します。
マウス移動イベントをリッスンします。
マウス移動イベントが発生したら、マウスの新しい座標を取得します。
マウスの新しい座標と元の座標の差を計算します。
オブジェクトの現在の位置に差分を加算します。
Canvas をクリアし、オブジェクトを新しい位置に再描画します。
マウスアップイベントをリッスンします。
マウスアップイベントが発生したら、マウス移動イベントのリスナーを削除します。

以下は、この方法の実装例です。

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

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let isDragging = false;
let mouseX, mouseY;

const rect = { x: 50, y: 50, width: 100, height: 75 };

canvas.addEventListener('mousedown', e => {
  const rectX = e.offsetX - canvas.getBoundingClientRect().left;
  const rectY = e.offsetY - canvas.getBoundingClientRect().top;
  if (rectX > rect.x && rectX < rect.x + rect.width &&
      rectY > rect.y && rectY < rect.y + rect.height) {
    isDragging = true;
    mouseX = rectX;
    mouseY = rectY;
  }
});

canvas.addEventListener('mousemove', e => {
  if (isDragging) {
    const newMouseX = e.offsetX - canvas.getBoundingClientRect().left;
    const newMouseY = e.offsetY - canvas.getBoundingClientRect().top;
    const dx = newMouseX - mouseX;
    const dy = newMouseY - mouseY;

    rect.x += dx;
    rect.y += dy;

    mouseX = newMouseX;
    mouseY = newMouseY;

    draw();
  }
});

canvas.addEventListener('mouseup', () => {
  isDragging = false;
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

draw();
</script>

2. キーボード操作による移動

キーボードを使用して、オブジェクトを上下左右に細かく移動することができます。この方法では、特定のキーが押されたことを検出し、それに応じてオブジェクトの位置を更新します。

以下は、キーボード操作による移動の実装例です。

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

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const rect = { x: 50, y: 50, width: 100, height: 75 };
const speed = 5;

document.addEventListener('keydown', e => {
  switch (e.key) {
    case 'ArrowUp':
      rect.y -= speed;
      break;
    case 'ArrowDown':
      rect.y += speed;
      break;
    case 'ArrowLeft':
      rect.x -= speed;
      break;
    case 'ArrowRight':
      rect.x += speed;
      break;
  }
  draw();
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
}

draw();
</script>

参考資料

よくある質問

質問	回答
オブジェクトの移動をスムーズにするにはどうすればよいですか？	`requestAnimationFrame` 関数を使用して、ブラウザのリフレッシュレートと同期したアニメーションを作成することで、オブジェクトの移動をスムーズにすることができます。
複数のオブジェクトを同時に移動するにはどうすればよいですか？	各オブジェクトの位置を格納する配列を作成し、各フレームで配列内のすべてのオブジェクトの位置を更新することで、複数のオブジェクトを同時に移動できます。
オブジェクトの移動範囲を制限するにはどうすればよいですか？	オブジェクトの位置を更新する前に、オブジェクトが移動範囲内にあるかどうかを確認することで、移動範囲を制限できます。

その他の参考記事:HTML DOM canvas オブジェクト