HTML5畫布，在drawImage之後，如何點擊圖片的特定區域？

我正在用HTML5畫布和庫canvasengine製作二維等距地圖。HTML5畫布，在drawImage之後，如何點擊圖片的特定區域？

所以，我有一個瓷磚： enter image description here

此圖片是一個正方形。

我在我的canva得出這樣的圖像與幾個選項：

_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

有什麼建議嗎？謝謝！

來源

2013-05-07 Clément Andraud

你可以點擊的像素的顏色這是複雜的

使用kinetic.js。 com/questions/6735470/get-pixel-color-from-canvas-on-mouseover。請注意，您不應在遊戲中的其他任何內容上使用該綠色。（或者你也可以檢查周圍的8個像素） – Cristy 2013-05-07 09:31:53

您可以將onClick事件綁定到整個畫布而不是特定圖像。所以，如果您想單獨使用onClick圖像，則應該將開始和結束座標存儲在變量中，並且應該檢查鼠標座標HTTP：//計算器的點擊..如果你希望它是簡單的其中之一，這一切在畫布上

來源

2013-05-07 09:27:24

HTML5畫布，在drawImage之後，如何點擊圖片的特定區域？

回答

相關問題