javascript - 在 HTML5 Canvas 上动态放置的图像上创建事件

Question

我通过 javascript 动态放置一个图 block ，因此对于每个图 block 我都需要一个 onclick 事件。

我正在做的是:

var image = new Image();
image.src = "tile.png";
for(var i=0;i<20;i++){
   for(var j=0;j<20;j++){
      ctx.drawImage(image,i,j,20,20,i,j,20,20);
   }
}

但是我不能在图像变量上放置一个事件，那是行不通的。是否有可能将事件处理程序传递给 drawImage？

我只希望在 Canvas 上单击时获得图 block 编号，请提出任何其他替代方案。谢谢。

Answer 1

为什么不起作用

您不能在 javaScript 对象上绑定(bind)事件，您必须使用 domElement 绑定(bind)它。

解决方案

您需要将图像附加到一个 domElement 并在那里绑定(bind) click 事件。将这些行添加到您当前的代码中:

$(".image_container").append(image).click(function () {
  //what you want to do when the canvas is clicked.
});