如何将简单的onClick事件处理程序添加到HTML5 canvas元素？

canvas元素中绘制的元素没有表示形式。它们唯一的表示是它们使用的像素及其颜色。绘制到画布元素意味着在即时模式下绘制位图。要在画布元素（形状）上获得单击事件，您需要捕获画布HTML元素上的单击事件并确定单击了哪个元素。这需要存储元素的宽度和高度。

要将click事件添加到canvas元素，请使用以下代码

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

示例

要确定单击了哪个元素，请使用以下代码片段-

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

//点击事件的事件监听器
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);
});