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/