javascript - 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。如何识别 Canvas 上的对象或省略 beginPath？

Answer 1

如果你想使用那个函数，你需要在每次你想做测试时重建路径(只是不要调用 fill 或 stroke)。

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

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

一旦您调用 beginPath，先前的路径几何图形将被丢弃，如果您调用 fill 或 stroke，您所拥有的只是受影响的像素。

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