Làm cách nào để thêm một trình xử lý sự kiện onClick đơn giản vào phần tử canvas HTML5?

Các phần tử được vẽ trong phần tử canvas không có biểu diễn. Đại diện duy nhất của chúng là các pixel mà chúng sử dụng và màu sắc của chúng. Vẽ đến một phần tử canvas có nghĩa là vẽ một bitmap ở chế độ ngay lập tức. Để nhận sự kiện nhấp chuột trên phần tử canvas (hình dạng), bạn cần nắm bắt các sự kiện nhấp chuột trên phần tử HTML canvas và xác định phần tử nào đã được nhấp. Điều này yêu cầu lưu trữ chiều rộng và chiều cao của phần tử.

Để thêm sự kiện nhấp chuột vào phần tử canvas của bạn, hãy sử dụng mã được cung cấp bên dưới

canvas.addEventListener('click', function() { }, false);

Ví dụ

Để xác định phần tử nào đã được nhấp, hãy sử dụng đoạn mã sau -

var e = document.getElementById('myCanvas'),
   elemLeft = e.offsetLeft,
   elemTop = e.offsetTop,
   context = e.getContext('2d'),
   elements = [];

// event listener for click event
e.addEventListener('click', function(event) {
   var xVal = event.pageX - elemLeft,
   yVal = event.pageY - elemTop;
   console.log(xVal, yVal);
   elements.forEach(function(ele) {
      if (yVal > ele.top && yVal < ele.top + ele.height && xVal > ele.left && xVal < ele.left + ele.width) {
         alert(‘element clicked');
      }
   });
}, false);
elements.push({
   colour: '#1C2128’,
   width: 250,
   height: 200,
   top: 30,
   left: 20
});
elements.forEach(function(ele) {
   context.fillStyle = element.colour;
   context.fillRect(ele.left, ele.top, ele.width, ele.height);
});