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

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

キャンバス要素を基準としたマウス クリックの x 座標と y 座標を取得するには、次の手順を実行します。これらの手順:

1. イベントを定義するハンドラー:

   canvas.addEventListener('mousedown', function(e) {
       // Code to get cursor position
   })

2. カーソル位置の計算:
   イベント ハンドラー内で、getBoundingClientRect() メソッドを使用して、キャンバスの相対位置を取得します。を画面にコピーし、そこからクリック イベントの座標を減算して、相対的な座標を見つけます。位置:

   const rect = canvas.getBoundingClientRect()
   const x = event.clientX - rect.left
   const y = event.clientY - rect.top

3. ログ座標:
   最後に、座標値をコンソールに出力したり、座標値をコンソールで使用したりできます。アプリケーション:

   console.log("x: " + x + " y: " + y)

例:

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)
})

このソリューションは、Safari、Opera、Firefox にブラウザ間の互換性を提供します。従来のブラウザのサポートについては、jQuery またはクロスブラウザ ライブラリの使用を検討してください。

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