如何為畫布元素新增點擊事件處理程序？

畫布元素的 OnClick 事件處理程序

使用畫布元素時，將事件處理程序分配給繪製的物件可能是一個挑戰。與其他 HTML 元素不同，canvas 元素沒有對點選事件的本機支援。

解決方案：DOM 事件和數學

向畫布添加單擊事件處理程序元素，您需要做兩件事：

1. DOM 事件處理： 擷取點擊使用addEventListener 方法在畫布HTML 元素上發生事件。
2. 碰撞偵測： 根據滑鼠點選的位置和繪製的尺寸，使用數學計算來決定點選了哪個元素元素。

程式碼範例

以下是實現這些步驟的範例程式碼：

// 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);

為什麼您的嘗試沒有成功

• elem.onClick = Alert("你好世界");將alert()回傳值賦給onClick屬性，立即觸發alert。
• elem.onClick = "alert('hello world!')";為 onClick 屬性指派一個字串。
• elem.onClick = function() {alert('hello world!'); };使用古老的 onclick 屬性並區分大小寫。

以上是如何為畫布元素新增點擊事件處理程序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！