Html5 Canvas 方法 isPointInPath 只确定最后一个对象

Question

一个例子here。

var context=document.getElementById("canvas").getContext("2d");

//Red Box
context.beginPath();
context.fillStyle="Red";
context.rect(10,10,50,50);
context.fill();

//Pink circle
context.beginPath();
context.lineWidth="3";
context.fillStyle="Pink";
context.arc(250,250,50,0,Math.PI*2,false);
context.fill();
context.stroke();

context.font="1.2em Verdana";
context.fillStyle="Black";
context.fillText(context.isPointInPath(35,35),35,35);
context.fillText(context.isPointInPath(250,250),250,250);

如果您在没有 beginPath 的情况下编写，则检测到所有对象。 如何识别画布上的对象或省略 beginPath？

Answer 1

如果您想使用该功能，您需要在每次进行测试时重建路径（只是不要调用fill 或stroke）。

如果有很多对象并且速度很重要，我通常会使用我自己的多边形测试函数或我自己的空间数据结构。

请注意，画布只是一个位图，它不存储您用来在其上绘制的命令。这就是为什么它在绘制形状后无法进行检查，您只能测试当前路径。

调用beginPath 后，之前的路径几何图形将被丢弃，如果调用fill 或stroke，则只有受影响的像素。

对于您的情况，检查画布像素的颜色可能是有意义的...

Answer 2

我刚刚读到画布规范的一个新补充是 Path() 对象。据推测，这些可以被存储并随后测试和/或重放。可能有用。如果我正确理解了规范。

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#path-objects