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>

我想要的是，当用户单击正方形时，会弹出警报，但是没有发生。

Answer 1

画布上下文用于将图形绘制到画布上。因此，与其尝试向事件上下文中添加事件侦听器，不如将其添加到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>

Answer 2

您的变量ctx在画布的图形上下文中，而不是画布本身。您命名为c的变量是要向其添加事件侦听器的变量。

将onclick和onmouseover添加到画布元素

2 个答案: