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

Question

这里有一个例子.

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.

可能是你的情况,检查画布像素的颜色可能是有意义的...