HTML5 canvas，在drawImage之后，如何單擊圖像的特定區域？

Question

我正在使用HTML5畫布和庫canvasengine制作2D等距圖。

所以，我有一塊瓷磚：

該圖像是正方形。

我使用幾種選擇在我的畫布上繪制此圖像：

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

在那之后，我需要在此_tile上添加onclick事件，但僅在綠色部分：

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

使用此功能，我可以單擊所有圖片，無論是否為白色。 我必須堆疊這些圖塊才能生成地圖，所以當我單擊圖像的邊緣時，它會選擇下一個圖塊...

我需要在_tile.drawImage()之后做類似的事情：

_tile_diamond.onclick

有任何想法嗎 ？ 謝謝 ！

Answer 1

您可以為整個畫布綁定onClick事件，而不是為特定圖像綁定on。事件。因此，如果僅希望onClick用於圖像，則應將開始和結束坐標存儲在變量中，並應檢查單擊鼠標的坐標。這很復雜

如果您希望它更簡單一些，請使用dynamic.js ，在畫布上完成所有這些操作