HTML5画布，在drawImage之后，如何点击特定区域的图像？

Question

我正在用HTML5画布和图书馆的canvasengine制作二维等距地图。

所以，我有一块瓷砖

​

这张照片是正方形的。

我在canva上画了这张图片，有几个选项：

_tile.drawImage(tileset.name, x, y, this.tile_w, this.tile_h, posx, posy, this.tile_w, this.tile_h);

在此之后，我需要在此onclick上添加一个事件_tile，但只在绿色部分添加：

_tile.on("click", function(e) {
    this.opacity = this.opacity < 1 ? 1 : 0.5 ;
});

有了这个功能，我可以点击我所有的图片，白色部分或不。我不得不堆叠瓷砖来生成地图，所以当我点击图像的边缘时，它会选择下一个瓷砖。

我需要做这样的事情，在_tile.drawImage()之后：

_tile_diamond.onclick

有什么想法吗？谢谢！

Answer 1

您可以绑定整个画布的onClick事件，而不是特定的图像。因此，如果您希望仅用于图像的onClick，您应该将开始和结束协调存储在一个变量中，并且应该检查鼠标在单击时的协调。这很复杂

如果您想让kinetic.js更简单一些，可以在画布上完成所有这些工作，请使用它