Создайте событие на динамически размещаемом изображении на холсте HTML5

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), вы можете добавить событие click для каждого изображения, используя live, которое добавляет событие click к dom на лету. Поэтому измените свой код следующим образом. Комментарии в методе. Дайте мне знать, если это работает для вас.

Rob

Не уверен, если у вас есть какой-нибудь код для захвата плитки с изображения, но вы могли бы использовать это ...

Tileset для игры на холсте HTML5

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 );
      });

   }
}