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

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

この質問は、キャンバス要素を基準としたマウス クリックの正確な座標の取得を中心に展開します。 Safari、Opera、Firefox などの最新のブラウザの場合、jQuery の必要性を排除する合理化されたソリューションが存在します。

提供されている JavaScript コードは、このタスクに対する雄弁なアプローチを提供します。

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 座標を計算することにより、マウスのクリック位置を効率的にキャプチャします。 console.log() 呼び出しはこれらの座標を表示し、キャンバス要素内のクリック位置を明確に示します。

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