☰

キャンバス要素上でマウスをクリックした座標を取得するにはどうすればよいですか? [重複] 質問する

tag-icon • tag-icon javascript canvas
キャンバス要素上でマウスをクリックした座標を取得するにはどうすればよいですか? [重複] 質問する

クリックの x 座標と y 座標 (キャンバス要素を基準として) を返すクリック イベント ハンドラーをキャンバス要素に追加する最も簡単な方法は何ですか?

従来のブラウザとの互換性は必要ありません。Safari、Opera、Firefox で十分です。

ベストアンサー1

シンプルさは好みだが、クロスブラウザ機能も欲しいという場合、このソリューションが私にとって最適だとわかりました。これは、@Aldekein のソリューションをjQuery なしで簡略化したものです。

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

おすすめ記事