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

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

キャンバス要素上のマウス クリックの座標を決定することは、さまざまなアプリケーションにとって重要です。以下に、Safari、Opera、Firefox で動作するクロスブラウザー ソリューションを示します。

function getCursorPosition(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    console.log("x: " + x + " y: " + y);
}

const canvas = document.querySelector('canvas');
canvas.addEventListener('mousedown', function(e) {
    getCursorPosition(canvas, e);
});

このコード スニペットは、getBoundingClientRect() メソッドを使用して、ドキュメント内のキャンバス要素の位置を取得します。次に、キャンバス要素の原点を基準にしてマウス クリックの x 座標と y 座標を計算します。

mousedown イベントのイベント リスナーを追加すると、マウス クリックをキャプチャし、getCursorPosition 関数を使用して座標を取得できます。この情報は、オブジェクト操作やキャンバス要素内でのユーザー操作など、さまざまな目的でさらに処理できます。

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