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）然后填充和/或中风。

因为混合风格，路径和笔画/填充，只会混淆事物。

编辑：当您进入更复杂的绘图时，您还必须更改变换：缩放，旋转和平移了解画布的当前状态可能会变得非常困难事实上，即使只处理常规风格，也可能难以避免在每次抽奖中设置所有内容并知道当前设置是什么。

解决方案是在绘制之前保存上下文，然后将其恢复：

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.

我们怎样才能利用beginPath（）canvas方法？

1 个答案: