javascript - HTML5画布，drawImage之后，如何点击图片的特定区域？

Question

我正在使用 HTML5 画布和库画布引擎制作 2D 等距地图。

所以，我有一个瓷砖：

这个图像是一个正方形。

我用几个选项在我的画布上绘制这个图像：

_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