Javascript检查画布上的透明图像是否已单击

我有一块画布，我画了一个透明的，多边形形状的图像。现在我需要检查该图像是否已被单击

我有绳子 { x:30， y:20， w:100， h:100 }

我可以检查长方体或圆形单击，但是如果它像多边形一样是刚性的，会怎么样？是否有像素单击测试或凸面算法（但我不想指定边）

---

谢谢。

一个解决方案是使用辅助画布作为贴图来实现像素检测

在场景画布上绘制形状

在第二个画布上绘制精确的形状，但将颜色设置为rgb（0,0,0）

将该颜色作为参考存储在某种地图中，以参考您的第一个“形状”

e、 g

每次在画布上绘制新形状时，将rgb增加1。除非您有超过1670万个形状（256^3），否则此方法就足够了

---

下面是一个示例实现：

当您的问题说您不想指定边时，使用

上下文测试任何形状（甚至透明形状）非常容易。isPointInPath（mouseX，mouseY）

。解决了这个问题--向上投票。为每个形状添加新画布有点贵。您可以通过使用alpha值数组而不是整个画布来减少解决方案的内存占用，因为您只需要测试透明度，而不是RGB.：-）

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