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

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

キャンバス要素内のマウス クリックの正確な座標を取得することは、さまざまなプログラミング アプリケーションで一般的なニーズです。 。次のガイドでは、Safari、Opera、Firefox などの Web ブラウザ向けの簡単なアプローチを説明します。

クロスブラウザ ソリューション

シンプルなクロスブラウザ ソリューションを実現するには、 getCursorPosition という名前の 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);
});

マウス クリックが検出されると、getCursorPosition 関数が呼び出され、クリックの x 座標と y 座標がコンソールにログが記録されました。

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