Bagaimana Saya Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas?

Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas

Untuk mendapatkan koordinat x dan y klik tetikus berbanding elemen kanvas, ikuti langkah berikut:

1. Tentukan Acara Pengendali:

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

2. Kira Kedudukan Kursor:
   Di dalam pengendali acara, gunakan kaedah getBoundingClientRect() untuk mendapatkan relatif kedudukan kanvas ke skrin dan kemudian tolak koordinat acara klik daripadanya untuk mencari relatif kedudukan:

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

3. Koordinat Log:
   Akhir sekali, anda boleh mengeluarkan nilai koordinat ke konsol atau menggunakannya dalam aplikasi:

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

Contoh:

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

Penyelesaian ini menyediakan keserasian merentas pelayar untuk Safari, Opera dan Firefox. Untuk sokongan penyemak imbas lama, pertimbangkan untuk menggunakan jQuery atau pustaka silang penyemak imbas.

Atas ialah kandungan terperinci Bagaimana Saya Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!