javascript - 将 onclick 和 onmouseover 添加到 canvas 元素

Question

我已经尝试这样做很长时间了，但我不知道该怎么做!

我不懂 JQuery，所以不幸的是，这对我不起作用。

<canvas id="canvas"></canvas>
<script>
  var c = document.getElementById('canvas');
  var ctx = c.getContext('2d');

  c.width = '500';
  c.height = '400';
  c.style.border = '1px solid #000000';
  c.style.background = '#b2b2b2';

  ctx.beginPath();
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(50,50,30,30);
  ctx.addEventListener('click',function(){alert('You clicked me!')},false)
</script>

我想要的是当用户点击方 block 时，会弹出一个警报，但什么也没有发生。

Answer 1

Canvas 上下文用于将图形绘制到 Canvas 上。因此，您不应尝试将事件监听器添加到上下文中，而应该将其添加到 Canvas (c) 元素中，如下所示:

c.addEventListener('click', function() {
  // logic...
}

如果您希望仅在点击红色框时才显示弹出窗口，则需要获取点击的 x 和 y 坐标，并且检查是否属于您的红框内:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

c.width = 500;
c.height = 400;
c.style.border = '1px solid #000000';
c.style.background = '#b2b2b2';

ctx.beginPath();
ctx.fillStyle = '#ff0000';

var box = {
  x: 50,
  y: 50,
  w: 30,
  h: 30
}

ctx.fillRect(box.x, box.y, box.w, box.h);
c.addEventListener('click', function(ev) {
  var {x, y} = getCursorPosition(c, ev);
  
  if(box.x <= x && x <= box.x+box.w && box.y <= y && y <= box.y+box.h) {
    alert('You clicked me!');
  }
});

function getCursorPosition(canvas, ev) {
    var rect = canvas.getBoundingClientRect()
    var x = ev.clientX - rect.left
    var y = ev.clientY - rect.top
    return {x, y};
}

<canvas id="canvas"></canvas>