Question

<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 128, 128);
  };
  imageObj.src = 'http://xxx/yyy/zzz.jpg';
</script>

如果单击画布对象（不是画布）的子项 imageObj ，我如何得到通知或挂钩事件处理程序？

Answer 1

这样做的方法是处理画布的click事件，然后自己弄清楚画布的哪个部分被点击：

canvas.addEventListener("mouseup", doMouseClick, false);

var doMouseClick = function(event) 
{
   //Some magic to have the exact coordinates in the canvas:
   var clickPos = {
     x : event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor($(canvas).offset().left);,
     y : event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor($(canvas).offset().top) + 1 
   }

   //check the image
   if (clickPos.x > 128 && clickPos.y < 128 + imageObj.width
       && clickPos.y > 128 && clickPos.y < 128 + imageObj.height){
      console.log("Oh boy! Someone clicked the image!");
   }

}

我们必须这样做的原因是因为你没有将你的图像作为一个孩子“添加”到画布上，你在画布上“画”它。画布只显示像素，不知道实际绘制的是什么。

html5：如何处理画布子点击事件？

1 个答案: