Question

我正在学习Html5 Canvas几周，但上面的问题困扰了我很久。

不规则形状，可能是圆形，矩形，椭圆形，多边形，或由某些线条和贝塞尔曲线构成的路径......

我找到了一些形状的算法，比如圆形，矩形和多边形，但是，如果我在画布中使用它们，对于许多形状的那些它将会如此复杂。

我也查看了一些画布库，比如Kinetic.js，paper.js，fabric.js等等，他们都做得很好，但是它们的代码非常多，并且在这里混合，所以我可以得到要点......

但是我发现，所有这些都没有使用'isPointInPath'方法来完成这项工作。为什么？如果使用这个，我也可以做这个工作！

kinetic.js，我知道他使用getImageData来确定，但奇怪的是，它得到的图像数据不是alpha（alpha总是255），但它绘制的形状是半透明的，哦，没有我的大脑没有想到。

所以我在这里想知道如何在画布中确定一个点是不规则的形状（可能是半透明的），即使是一种思考方式也可以帮助我。

并且，是'isPointInPath'方法的一些问题？没有人使用它？

Answer 1

我认为没有理由不使用内置函数：

var isInPath = context.isPointInPath(x, y)

对于可以使用的笔划 - 笔划是分开的，因为路径可以是开放线，或者您可以将笔划宽度扩展到实际多边形之外：

var isInStroke = context.isPointInStroke(x, y)

请注意，这仅适用于最后一个路径（使用beginPath()后）。如果需要迭代多个路径（即形状），则需要重新构造路径（不需要描边或填充）。这可能是有些人不使用它的原因。

透明度不是问题，因为检查路径涉及向量，而不是渲染的输出（颜色信息不是检查的一部分）。

将来您可以直接使用Path对象。目前，这并没有在任何浏览器中实现，否则这将使迭代变得轻而易举;所以重建最后一条路是目前唯一的方法。由于您在检查时实际上不需要绘制任何内容，因此除非有多个对象需要迭代，否则性能是可以接受的。