HTML5 命中检测是否可行？

Question

我使用本网站其他地方提供的 Canvas 代码创建了一个屏幕，其中有几个重叠的透明 png，其中不透明部分是不规则形状。我可以得到光标下的颜色，这很棒。但是我的形状都是相同的颜色，我需要一种方法来获取特定形状的 ID，以便我知道点击了哪个形状。想象一张由覆盖国家/地区的重叠 png 组成的地图，您想检测点击了哪个国家/地区。据我所知，id 检测仅适用于矩形区域。有什么建议吗？

$('#myCanvas').click(function(e){
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1, 1).data;
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
alert(hex);
});

此代码获取并显示颜色（为清楚起见，findPos 和 rgbToHex 是分开的函数）。我要身份证！救命！

Answer 1

即使有透明度，图像也是矩形。然后，您可以通过矩形交叉点知道哪些图像位于单击点 - 检查您的图像数组及其 x、y 点的宽度、高度是否有交叉点。然后，您会想出一系列可能被点击的图像。如果列表中只有一个，那么您就完成了。

图像具有与您编写它们相反的顺序的隐含 Z 顺序，这意味着，一个图像被与其重叠的下一个写入的图像覆盖。您可以使用它来知道如果在点击的点上不止一个，那么在哪个顺序中尝试它们进行命中测试。唯一的技巧是检测图像像素是否透明。

要检测单个图像中单击的像素点的透明度，您可以保留第二个隐藏的画布元素。清除它，然后将目标图像写入它的相同位置，并使用相同的代码查看第二个画布内点击的像素是否为透明色。如果是，则对 Z 顺序中的下一张图像重复此过程，直到获得单击了不透明像素的图像。

一个小而重要的优化是检查首先点击的颜色，如果它是透明颜色，您已经知道没有任何图像被点击在不透明的点上。