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

没有

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();
};

默认的内部
Path
对象在内部累加所有路径方法调用，例如
lineTo
、
rect
、
arc
等等（除了一些例外情况，例如
fillRect
、
strokeRect
、
fillText
等，这些调用直接基于当前设置栅格化）。在这一点上，这些只是矢量表示

每次调用
stroke（）
或
fill（）
时，将使用当前笔划和/或填充颜色设置对路径对象进行光栅化

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

beginPath（）
是放弃现有（子）路径并重新开始的唯一方法。由于它只清除内部路径，而不清除画布上的光栅化结果，除非您希望重用这些路径，否则通常不会出现问题

当
路径
对象在更多浏览器中公开时（目前只有Chrome允许您直接使用
路径
对象，但似乎还没有将其集成到画布中使用），您可以不使用
beginPath（）
实现这一点

您可以创建不同的
路径
对象，并分别光栅化这些对象：

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（）
，您可以重用这些对象-与translate等结合使用，您基本上拥有一个更面向对象的画布

作为旁注：许多人的印象是
closePath（）
将“结束”路径，但它所做的只是关闭连接第一个点和最后一个点的“循环”。您仍然可以向其中添加新路径