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

我正在用HTML5画布和图书馆画布引擎制作一个二维等距图

所以，我有一块瓷砖：

这张照片是正方形的

我在我的canva上绘制此图像，有几个选项：

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

之后，我需要在这个_图块上添加一个事件onclick，但只在绿色部分添加：

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

---

有什么想法吗？谢谢

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

---

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

您可以获得单击像素的颜色：。请注意，你不应该在游戏中的其他任何东西上使用绿色。或者你也可以检查周围的8个像素

_tile_diamond.onclick