將onclick和onmouseover添加到畫布元素

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上下文用於在畫布上繪制圖形。 因此，與其嘗試將事件偵聽器添加到您的上下文中，不如將其添加到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的變量是要向其添加事件偵聽器的變量。