Question

如果没有context.beginPath();，则顶部的10px红色笔划将重新绘制为30px绿色笔划，即使在已经绘制笔划之前未调用30px和绿色上下文属性。那是为什么？

window.onload = function() {
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");  

context.moveTo(10,50);
context.lineTo(400,50);
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();

//context.beginPath();
context.moveTo(10,120);
context.lineTo(400,120);
context.lineWidth = 30;
context.strokeStyle = "green";
context.stroke();
};

Answer 1

默认的内部Path对象在内部累积所有路径方法调用，例如lineTo，rect，arc等等（除了少数例外情况，例如{{1}根据当前设置直接栅格化的}，fillRect，strokeRect等。这些只是矢量表示。

每当您使用当前笔画和/或填充色设置调用fillText或stroke()时，Path对象光栅化。

光栅化路径后，它不会自行清除，您可以继续累积路径。

fill()是丢弃现有（子）路径并重新开始的唯一方法。由于它只清除内部路径而不是画布上的栅格化结果，因此除非您想重用这些路径，否则通常不会出现问题。

在更多浏览器中公开beginPath()对象时，有另一种方法可以在不使用beginPath()的情况下执行此操作（目前只有Chrome允许您直接使用Path对象，但似乎没有将其集成到画布使用中。）

您可以制作不同的Path个对象并单独栅格化这些对象：

Path

在这里你不需要var path1 = new Path(); var path2 = new Path(); path1.moveTo(10,50); path1.lineTo(400,50); context.lineWidth = 10; context.strokeStyle = "red"; context.stroke(path1); path2.moveTo(10,120); path2.lineTo(400,120); context.lineWidth = 30; context.strokeStyle = "green"; context.stroke(path2);并且你可以重复使用这些对象 - 结合翻译等等你基本上有一个面向对象的画布。

作为旁注：许多人认为beginPath()将“结束”路径，但它所做的就是关闭连接第一个点和最后一个点的“循环”。您仍然可以添加新路径。

为什么省略beginPath（）会重绘所有内容？

1 个答案: