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

我刚读了一个新的除了画布规范路径（）对象。推测这些可以被存储并且随后被测试和/或重放。可能有用。如果我已经正确理解了这个规范。

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