HTML5 キャンバスでマウス クリックの座標を取得するにはどうすればよいですか?

キャンバス要素上のマウス クリックの座標を取得する

キャンバス要素上のマウス クリックの座標を取得するには、次の手順に従います。

キャンバスを取得する要素

DOM セレクターを使用してキャンバス要素を見つけてアクセスします。

イベント リスナーを追加します

イベント リスナーをキャンバスにアタッチします。マウスのクリックをリッスンします。

イベント

イベント ハンドラー内で getBoundingClientRect() メソッドを使用して、画面上のキャンバス要素の位置を取得します。

座標を計算します

キャンバスの位置からクリックのクライアント座標を減算して、オブジェクト内の相対座標を取得します。 Canvas.

コード例:

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Coordinates: X: ${x}, Y: ${y}`);
});

このソリューションはシンプルでブラウザ間互換性があり、Safari、Opera、Firefox で効果的に動作します。

以上がHTML5 キャンバスでマウス クリックの座標を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。