Bagaimana Saya Mendapatkan Koordinat Klik Tetikus pada Kanvas HTML5?

Mendapatkan Koordinat Klik Tetikus pada Elemen Kanvas

Untuk menangkap koordinat klik tetikus pada elemen kanvas, ikut langkah berikut:

Dapatkan Kanvas Elemen

Cari dan akses elemen kanvas menggunakan pemilih DOM.

Tambah Pendengar Acara

Lampirkan pendengar acara pada kanvas untuk dengar klik tetikus.

Kendalikan Acara

Dalam pengendali acara, gunakan kaedah getBoundingClientRect() untuk mendapatkan semula kedudukan elemen kanvas pada skrin.

Kira Koordinat

Tolak koordinat pelanggan klik daripada kedudukan kanvas untuk mendapatkan koordinat relatif dalam kanvas.

Kod Contoh:

const canvas = document.querySelector('canvas');

canvas.addEventListener('mousedown', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  console.log(`Coordinates: X: ${x}, Y: ${y}`);
});

Penyelesaian ini mudah dan serasi merentas penyemak imbas, memastikan ia berfungsi dengan berkesan dalam Safari, Opera dan Firefox.

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