Bagaimana untuk Menambahkan Pengendali Acara Klik pada Elemen Kanvas?

Pengendali Acara OnClick untuk Elemen Kanvas

Apabila bekerja dengan elemen kanvas, menugaskan pengendali acara kepada objek yang dilukis boleh menjadi satu cabaran. Tidak seperti elemen HTML lain, elemen kanvas tidak mempunyai sokongan asli untuk acara klik.

Penyelesaian: DOM Events and Math

Untuk menambah pengendali acara klik pada kanvas elemen, anda perlu melakukan dua perkara:

1. Pengendalian Acara DOM: Tangkap peristiwa klik pada elemen HTML kanvas menggunakan kaedah addEventListener.
2. Pengesanan Perlanggaran: Gunakan pengiraan matematik untuk menentukan elemen yang diklik, berdasarkan kedudukan klik tetikus dan dimensi elemen yang dilukis.

Kod Contoh

Berikut ialah contoh kod yang melaksanakan langkah ini:

// Get the canvas element and its context
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');

// Define an array to store element information
var elements = [];

// Add a click event listener to the canvas
elem.addEventListener('click', function(event) {
  // Calculate the mouse click position relative to the canvas
  var x = event.pageX - elem.offsetLeft;
  var y = event.pageY - elem.offsetTop;

  // Loop through the elements and check for collision
  elements.forEach(function(element) {
    if (y > element.top && y < element.top + element.height 
        && x > element.left && x < element.left + element.width) {
      alert('clicked an element');
    }
  });
});

// Add an element to the array
elements.push({
  colour: '#05EFFF',
  width: 150,
  height: 100,
  top: 20,
  left: 15
});

// Render the element
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);

Mengapa Percubaan Anda Tidak Berhasil

• elem.onClick = alert("hello world"); memberikan nilai pulangan alert() kepada sifat onClick, serta-merta mencetuskan amaran.
• elem.onClick = "alert('hello world!')"; memberikan rentetan kepada sifat onClick.
• elem.onClick = function() { alert('hello world!'); }; menggunakan sifat onclick kuno dan peka huruf besar-kecil.

Atas ialah kandungan terperinci Bagaimana untuk Menambahkan Pengendali Acara Klik pada Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!