Bagaimana untuk Melampirkan Pengendali Acara pada Elemen Kanvas dan Mengesan Klik pada Bentuk?

Melampirkan Pengendali Acara pada Elemen Kanvas

Apabila melukis pada elemen kanvas, bentuk yang diberikan tidak mempunyai perwakilan yang wujud melebihi pikselnya. Ini bermakna acara klik tidak boleh dilampirkan terus pada bentuk individu.

Penyelesaian:

Untuk menambah pengendali klik pada elemen kanvas:

canvas.addEventListener('click', function() { /* Event handler code */ }, false);

Untuk menentukan elemen dalam kanvas yang telah diklik:

var canvas = document.getElementById('myCanvas');

// Get canvas offset and context
var canvasLeft = canvas.offsetLeft + canvas.clientLeft;
var canvasTop = canvas.offsetTop + canvas.clientTop;
var context = canvas.getContext('2d');

// Array to store element data
var elements = [];

// Add 'click' event listener to canvas
canvas.addEventListener('click', function(event) {
  // Calculate click coordinates relative to canvas
  var x = event.pageX - canvasLeft;
  var y = event.pageY - canvasTop;

  // Check for collision detection against elements
  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');
      // TODO: Additional actions (e.g., remove element, update canvas)
    }
  });

}, false);

Percubaan Gagal:

• elem.onClick = alert("hello world");: Menetapkan nilai pulangan alert() kepada sifat onClick, serta-merta memaparkan amaran.
• elem.onClick = "alert('hello world!')"; : Berikan rentetan pada sifat onClick, menyebabkan tiada pengendalian acara.
• elem.onClick = function() { ... }: Menggunakan kaedah kuno pengendalian acara , yang sensitif huruf besar-besaran (onclick vs. onClick).

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