Question

我想在画布上绘制几条简单的线条，但如果我的脚本代码中没有beginPath（）和restore（），它将无效。您是否必须将这些内容绘制到HTML 5 Canvas？

代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


ctx.lineWidth="5";
ctx.strokeStyle="green";  // Green path
ctx.moveTo(0,75);
ctx.lineTo(250,75);

ctx.strokeStyle="purple";  // Purple path
ctx.moveTo(50,0);
ctx.lineTo(150,130);            
</script>

</body>
</html>

Answer 1

beginPath()用于开始绘制轮廓，您将需要它。然后我们使用stroke()实际绘制到HTML5 Canvas。

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

Fiddle

restore()用于更改Canvas的状态：旋转，缩放，倾斜等。此方法将其恢复为已保存的Canvas的最后一个状态。但它不是用于在我们的画布上实际绘制，而是用于改变它的状态。

Answer 2

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

使用fill或stoke时，当前保留的路径（=当前路径的所有子路径）将使用当前变换，剪切和颜色设置进行描边/填充。

请注意，还有直接命令：fill / strokeRect，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（保留）命令，因此不用考虑使用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（）和restore（）？

2 个答案: