javascript - 对 Canvas 中的图像进行像素精确的命中检测？

Question

我有一个基本的等距 map ，其中在 html Canvas 的 map 上加载了一些 Sprite 。

我想知道，是否可以单击 Canvas ，达到像素精确的水平，并让 JS 计算出您在 Canvas 中单击的内容？

如果是这样，是否还有一种无需库即可实现的方法？

Answer 1

Canvas API 具有 isPointInPath(x, y)方法，它允许您确定点 (x, y) 是否在当前路径内部(或之上)。

现在，如果您的 Canvas 中已经有许多形状，并且想知道单击了哪一个，并且不想使用库，则必须维护表示这些形状的对象列表或 map ，并拥有一个 onclick 事件处理程序，循环访问它并执行一些计算。

这样的列表可能看起来像

var shapeList = [
    {shape: "rect",   x0: 100, y0: 100, x1: 200, y1: 150},
    {shape: "circle", x0: 400, y0: 400, r: 50},
    ...
];

幸运的是，有一些库可以为您完成这项工作。您可以检查例如 crafty.js或lime.js 。这些对于 Canvas 游戏开发来说是有用的库。

例如，使用 Crafty 的 containsPoint(x, y)方法:

var circle = new Crafty.circle(0, 0, 10);
console.log(circle.containsPoint(0, 0));   // true
console.log(circle.containsPoint(50, 50)); // false