我们如何利用moveTo（）HTML5方法？

Question

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

我的问题是我们如何利用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行时，没有任何改变!!!!

Answer 1

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()一次绘制整个路径。