Javascript檢查是否已單擊畫布上的透明圖像

Question

我有一個畫布，我繪制了一個透明的圖像，並具有多邊形的形狀。 現在我需要檢查是否已單擊該圖像。

我有繩子{x：30，y：20，w：100，h：100}

我可以檢查一個盒子或圓圈點擊但是如果它像多邊形一樣剛性是有像素點擊測試還是凸算法（但我不想指定邊緣）？

謝謝。

Answer 1

一種解決方案是使用輔助畫布實現像素檢測以用作地圖。

1. 將您的形狀繪制到場景畫布上。
2. 將確切的形狀繪制到第二個畫布上，但將顏色設置為rgb（0,0,0）。
3. 將該顏色存儲在某種地圖中以引用您的第一個“形狀”

例如

var pixelMap = {
  '000' : 'rectangle 1',
  '001' : 'rectangle 2'
};

每次向畫布繪制一個新形狀時，將rgb增加1.除非你有超過1670萬個形狀（256 ^ 3），否則這個方法就足夠了。

下面是一個示例實現： https ： //jsfiddle.net/mikeschultz/nbtnxpf2/