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

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

2 个答案: