javascript - 我们如何利用 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) 原点移动到空间中的另一个点。

这里有一个例子。绘制某种三 Angular 形:

// 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)。然后，我们只调用一次 lines() 来绘制整个路径。