javascript - 我们如何利用moveTo()HTML5方法？

请让我有点困惑，所以我需要您的帮助。

我的问题是我们如何才能利用moveTo（）html5方法？

例如我在stackOverflow上找到了这个例子

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(c, 200,200, 60, 12);

但是当我在使用moveTo方法的代码中删除行号11时，没有任何变化！！！

最佳答案

moveTo() HTML5方法可让您将（0,0）原点移动到空间中的另一点。

这里有一个例子。绘制某种三角形：

// first part of the path
ctx.moveTo(20,20);
ctx.lineTo(100, 100);
ctx.lineTo(100,0);

// second part of the path
ctx.moveTo(120,20);
ctx.lineTo(200, 100);
ctx.lineTo(200,0);

// indicate stroke color + draw the path
ctx.strokeStyle = "#0000FF";
ctx.stroke();

在此示例中，我们在绘制路径的第一部分（左侧的形状）后简单地调用了moveTo(x, y)。然后，我们只调用一次stroke()即可绘制整个路径。