Question

我正在从javascript动态放置一个磁贴，因此对于每个磁贴，我需要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？

我只想点击画布上的瓷砖编号，请为此建议任何其他替代方案。感谢。

Answer 1

为什么它不起作用

你无法绑定javaScript对象上的事件，必须将其与domElement绑定。

解决方案

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

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

Answer 2

如果你使用JQuery（1.7.1），你可以使用live为每个图像添加一个click事件，它会立即将click事件添加到dom中。因此，请按以下方式更改代码。评论在方法中。如果这对您有用，请告诉我。

罗布

不确定您是否有一些代码可以从图片中抓取图块，但您可以使用此图片...

Tileset for HTML5 canvas game

var iCount = 1
for(var i=0;i<20;i++){
   for(var j=0;j<20;j++){
      iCount = iCount +1

      //create image in the loop
      var image = new Image();
      image.src = "tile.png";
      image.attr('class', 'theimage_' + iCount );

      //in the loop each image has a unique class name which you 
      //can attach to the dom via jquery live
      ctx.drawImage(image,i,j,20,20,i,j,20,20);

      //you can either attach some logic here or outside of the loop
      $('.theimage_' + iCount ).live('click', function() {
        alert("You Clicked: " + '.theimage_' + iCount );
      });

   }
}

在HTML5画布上的动态放置图像上创建事件

2 个答案:

为什么它不起作用

解决方案