html - Context.isPointInPath用法

我为此搜索了一下，但没有找到在HTML 5中使用Context.isPointInPath的任何示例。

我知道如果该点在当前路径上，应该返回真，但是您如何使用它呢？您是否应该在context.beginPath()和cotext.closePath()之间使用它(或为此填写*)

我尝试了这个:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(0,0, 100,100);
ctx.isPointInPath(50,50); // Returned false
ctx.isPointInPath(50,0);  // Tried it on the actual path, not the filled region, returned false
ctx.isPointInPath(50,8);  // My canvas had the default 8 offset, returned false
ctx.isPointInPath(50,9);  // Canvas had a border of 1px, returned false

我不知道出了什么问题，但是所有人都返回了false，而我从来没有一个返回true。

最后，我关闭了路径并检查了值，仍然返回false。

最佳答案

您对isPointInPath()的所有调用都返回false，因为在使用上下文时实际上并未创建任何路径。 fillRect()函数不会创建路径。它只是使用您先前指定的任何颜色填充 Canvas 上的某些像素。

相反，您将需要使用路径修改功能之一，例如rect()或moveTo()。有关isPointInPath()和path函数的所有详细信息，请参阅此处的 Canvas 规范:

isPointInPath():http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-ispointinpath

路径函数:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-%28paths%29