javascript - 我们如何利用 beginPath() Canvas 方法？

Question

请我需要你的帮助，我是 HTML5 新手，我有点困惑，我在编辑器中编写了以下代码

var canvas = document.getElementById('paper');
var c= canvas.getContext('2d');

c.beginPath();
c.lineWidth="5";
c.moveTo(0,75);
c.lineTo(250,75);
c.stroke(); // Draw it

c.beginPath();
c.lineWidth="5";
c.moveTo(0,0);
c.lineTo(250,75);
c.stroke(); // Draw it

但是当我删除第二个 c.beginPath() 时，没有任何改变! 那么我们如何利用 beginPath() 方法。

任何人都可以用清晰的例子为我解释一下吗？

非常感谢大家。

Answer 1

这是这个谜团的解决方案:
• beginPath 创建一个新路径。
• moveTo 在当前路径中创建一个新的子路径。

因此，当使用两次 beginPath 时，您将绘制两条线。
仅使用一次 beginPath 时，您将绘制一个图形，其中包含两条线的子路径。

子路径的原理允许您根据需要构建任何您想要填充/描边的内容，然后一次描边所有这些子路径。

您可以按照自己喜欢的方式使用。

关于样式:当使用填充或描边时，当前路径将以当前样式绘制(fillStyle/strokeStyle/lineWidth/font/...)。
所以你有义务用不同的风格来绘制，用beginPath创建一个新的路径。
另一方面，如果您要绘制大量具有相同样式的图形，则更合理的做法是设置一次样式，创建所有子路径，然后填充/描边所有内容。

Rq:绘图时这是一个好习惯:
1) 设定你的风格
2)构建你的路径/子路径，
3)然后填充和/或描边。

因为混合样式、路径和描边/填充只会让事情变得困惑。

编辑:当您绘制更复杂的绘图时，您还必须更改变换:缩放、旋转和平移。
了解 Canvas 的当前状态可能变得非常困难。
事实上，即使仅处理常规样式，也可能很难避免在每次绘制时设置所有内容并知道当前设置是什么。

解决方案是在绘制之前保存上下文，并在绘制之后恢复它:

1) 保存上下文
2) 设置样式
3)设置变换
4) 构建路径/子路径
5)恢复上下文。

这是一个简单但不太简单的示例:

function drawSmile(ctx, x, y, faceRadius, eyeRadius) {
    ctx.save();               // save 
    ctx.fillStyle = '#FF6';   // face style : fill color is yellow
    ctx.translate(x, y);      // now (x,y) is the (0,0) of the canvas.
    ctx.beginPath();          // path for the face
    ctx.arc(0, 0, faceRadius, 0, 6.28);
    ctx.fill();
    ctx.fillStyle = '#000';  // eye style : fill color is black
    ctx.beginPath();         // path for the two eyes
    ctx.arc(faceRadius / 2, - faceRadius /3, eyeRadius, 0, 6.28);
    ctx.moveTo(-faceRadius / 2, - faceRadius / 3); // sub path for second eye
    ctx.arc(-faceRadius / 2, - faceRadius / 3, eyeRadius, 0, 6.28);
    ctx.fill();
    ctx.restore(); // context is just like before entering drawSmile now.
}

drawSmile(ctx, 100, 100, 60, 12);

。

作为记录，代码绘制两条线:

c.lineWidth="5";
c.beginPath();  // new path
c.moveTo(0,75);
c.lineTo(250,75);
c.stroke(); // Draw it

c.lineWidth="10";
c.beginPath(); // new path
c.moveTo(0,0);
c.lineTo(250,75);
c.stroke(); // Draw it

一个路径有两行作为子路径:

c.lineWidth="5";
c.beginPath();  // new path
c.moveTo(0,75);
c.lineTo(250,75);
c.moveTo(0,0); // new sub-path within current path
c.lineTo(250,75);
c.stroke(); // Draw the two lines at once.