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

Question

我正在制作一个带有HTML5画布的2D等距地图和库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 for image，你应该将开始和结束坐标存储在一个变量中，并且应该检查你的鼠标坐标点击..这很复杂

使用 kinetic.js 如果你想要它更简单一个在画布上完成所有这些