Javascript 要画一条线，是否需要使用beginPath（）和restore（）？

我想在画布上画几行简单的线，但如果脚本代码中没有beginPath（）和restore（），它将无法工作。在HTML5画布上绘制一些东西需要这些吗

代码：

您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.lineWidth=“5”；
ctx.strokeStyle=“绿色”//绿道
ctx.moveTo（0,75）；
ctx.lineTo（250,75）；
ctx.strokeStyle=“紫色”//紫光大道
ctx.moveTo（50,0）；
ctx.lineTo（150130）；

beginPath（）

用于开始绘制轮廓，您将需要它。然后我们使用

stroke（）

以直观的方式绘制HTML5画布

ctx.beginPath(); // Start drawing
    // Drawing Methods Here
ctx.stroke() // Show what we drew.

restore（）

用于更改画布的状态：旋转、缩放、倾斜等。此方法将其还原为保存的画布的最后一个状态。但它不是用于在画布上实际绘制，而是用于更改其状态。

beginPath（）

用于开始绘制轮廓，您将需要它。然后我们使用

stroke（）

以直观的方式绘制HTML5画布

ctx.beginPath(); // Start drawing
    // Drawing Methods Here
ctx.stroke() // Show what we drew.

---

restore（）

用于更改画布的状态：旋转、缩放、倾斜等。此方法将其还原为保存的画布的最后一个状态。但它不是用于在画布上实际绘制，而是用于更改其状态。

画布处理路径。
因此，顾名思义，beginPath将启动一条新路径。
wise之后调用的每个保留绘图命令都将添加到当前路径。
（保留的绘图命令是没有直接影响的命令：moveTo、lineTo、（Curve）To、arc、rect。）
Rq1：使用moveTo是一个特殊命令：它将开始一个新的子路径，就像从纸上松开笔一样。
Rq2:closePath不是必需的，如果您想轻松地将最后一个点链接到第一个点，请使用它

使用填充或斯托克时，当前保留路径（=当前路径的所有子路径）将使用当前变换、剪裁和颜色设置进行笔划/填充

请注意，还有直接命令：fill/strokert、fill/strokeText、drawImage、get/putImageData。
这些命令不需要开始新路径，也不会影响当前路径-它们直接在画布上绘制

所以规则很简单：
•如果使用保留命令，则必须使用beginPath。
•如果使用直接命令，不要使用beginPath，只需发送命令即可

正如您所注意到的，您可以在画布上更改许多设置：
•您有渲染设置：strokeStyle/fillStyle/globalCompositeOperation/globalAlpha/lineWidth/font/textAlign/shadow/…
•您有变换设置，可以平移/缩放/旋转下一个绘图。
•您可以定义剪裁，以避免在某些区域进行绘制

save（）和restore（）允许您在当前画布的状态下不迷失方向。
规则是：无论如何，更改上下文的方式可能会影响所绘制的其他图形的渲染，只需在之前保存（）并在之后恢复即可

例1：

function strokeLine ( x1, y1, x2, y2, color) {
     ctx.beginPath();
     ctx.strokeStyle = color;
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2,y2);
     ctx.stroke();
}

我使用了moveTo/lineTo（reserved）命令，所以不用考虑就使用了beginPath。 这里的strokeStyle是在每次调用时设置的，因此不需要保存上下文

例2：

function drawImageRotated( img, x, y, rotation ) {
    ctx.save();
    ctx.translate(x + img.width/2, y + img.height/2); // translate to the middle of the image
    ctx.rotate(rotation); // rotate context
    ctx.drawImage(img, x - img.width/2, y - img.height/2 ); // draw the image in rotated context
    ctx.restore();
}

这里不需要使用beginPath（），因为我只使用直接命令（drawImage）。

---

但是关于画布状态，我不希望上下文在调用后保持平移/旋转。因此，我以保存开始，以还原结束，因此调用方在调用后保持相同的上下文。

画布处理路径。
因此，顾名思义，beginPath将启动一条新路径。
wise之后调用的每个保留绘图命令都将添加到当前路径。
（保留的绘图命令是没有直接影响的命令：moveTo、lineTo、（Curve）To、arc、rect。）
Rq1：使用moveTo是一个特殊命令：它将开始一个新的子路径，就像从纸上松开笔一样。
Rq2:closePath不是必需的，如果您想轻松地将最后一个点链接到第一个点，请使用它

使用填充或斯托克时，当前保留路径（=当前路径的所有子路径）将使用当前变换、剪裁和颜色设置进行笔划/填充

请注意，还有直接命令：fill/strokert、fill/strokeText、drawImage、get/putImageData。
这些命令不需要开始新路径，也不会影响当前路径-它们直接在画布上绘制

所以规则很简单：
•如果使用保留命令，则必须使用beginPath。
•如果使用直接命令，不要使用beginPath，只需发送命令即可

正如您所注意到的，您可以在画布上更改许多设置：
•您有渲染设置：strokeStyle/fillStyle/globalCompositeOperation/globalAlpha/lineWidth/font/textAlign/shadow/…
•您有变换设置，可以平移/缩放/旋转下一个绘图。
•您可以定义剪裁，以避免在某些区域进行绘制

save（）和restore（）允许您在当前画布的状态下不迷失方向。
规则是：无论如何，更改上下文的方式可能会影响所绘制的其他图形的渲染，只需在之前保存（）并在之后恢复即可

例1：

function strokeLine ( x1, y1, x2, y2, color) {
     ctx.beginPath();
     ctx.strokeStyle = color;
     ctx.moveTo(x1, y1);
     ctx.lineTo(x2,y2);
     ctx.stroke();
}

我使用了moveTo/lineTo（reserved）命令，所以不用考虑就使用了beginPath。 这里的strokeStyle是在每次调用时设置的，因此不需要保存上下文

例2：

function drawImageRotated( img, x, y, rotation ) {
    ctx.save();
    ctx.translate(x + img.width/2, y + img.height/2); // translate to the middle of the image
    ctx.rotate(rotation); // rotate context
    ctx.drawImage(img, x - img.width/2, y - img.height/2 ); // draw the image in rotated context
    ctx.restore();
}

这里不需要使用beginPath（），因为我只使用直接命令（drawImage）。

---

但是关于画布状态，我不希望上下文在调用后保持平移/旋转。因此，我以保存开始，以还原结束，因此调用方在调用后保留相同的上下文。

这就是为什么使用保存画布上下文。因为当c.resto