应该在ctx.lineTo之前使用ctx.moveTo吗？

Question

我在mdn (我知道它不是官方参考)或其他任何地方都找不到这个；所以，我想我应该问这个简单的问题：

例如，我有以下代码片段：

var can = document.getElementById("can");
var ctx = can.getContext("2d");
var w = can.width; var h = can.height;
var ys = [1, 3, 2, 4, 5, 3, 2, 4, 5, 6, 7, 3];
ctx.beginPath();
for (var i = 0, iMax = ys.length; i < iMax; i++) {
    ctx.lineTo(i, ys[i]);
}
ctx.stroke();

它可以在chrome，firefox，ie11上运行，但是我想知道代码的有效性和对跨浏览器的支持。我找不到任何提到它的地方，但我想一定有提到它的地方。

因此，我的问题是，应该在使用ctx.lineTo之前使用ctx.moveTo，还是先使用ctx.lineTo (在ctx.beginPath之后)完全可以，为什么？(我在这个问题上找不到答案，但如果它是重复的，我很抱歉。)

Answer 1

不需要，如果您刚刚调用了moveTo，则不需要在调用lineTo之前调用beginPath。

根据specs的说法

在调用lineTo(x，y)方法时，必须运行以下步骤：

1. 如果其中一个参数为NaN或无穷大，则返回。
2. 如果对象的路径没有子路径，则确保存在(x，y).
3. Otherwise，)的子路径。使用直线将子路径中的最后一个点连接到给定点(x，y)，然后将给定点(x，y)添加到子路径。

在调用beginPath之后，对象的路径没有子路径，因此，我们在此算法的第二个项目结束。

的算法是：

当用户代理要确保在路径上存在坐标(x，y)的子路径时，用户代理必须检查该路径是否设置了其需要的新子路径标志。如果是，则用户代理必须创建一个新的子路径，并将点(x，y)作为其第一个(也是唯一的)点，就好像调用了moveTo()方法一样，然后必须取消设置该路径的需要新的子路径标志。

因此，在beginPath实际转换为moveTo调用后，首先调用lineTo。

​

var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineTo(120, 120); // converted to moveTo
ctx.lineTo(200, 150);
ctx.stroke();

<canvas id="canvas"></canvas>

​

请注意，只有lineTo的将其算法设置为在此之后立即停止确保有一个子路径算法，这意味着其他方法将在此插入的moveTo之后继续绘制。

​

var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(60, 60, 30, 0, Math.PI);
// first we'll get new (x, y) coordinates of the first point of our arc (90, 60)
// since there is no subpath yet, we implicitely call moveTo(90, 60)
// then we draw the arc as usual
ctx.stroke();

<canvas id="canvas"></canvas>

​

Answer 2

现在我已经正确地检查了它：

仅当您想要开始绘制新路径时才能使用的ctx.moveTo函数。和你可以用来代替ctx.moveTo函数的ctx.lineTo函数。

如果你只写ctx.lineTo(50, 50)，那么计算机就会像ctx.moveTo(50, 50);一样理解它。如果不跟随ctx.lineTo的调用，你就不能绘图。在这种情况下，您必须在此调用之后再次使用来自ctx.lineTo的下一个调用。

​

var ctx = document.querySelector('canvas').getContext('2d');
ctx.lineTo(50, 50); // it is like moveTo
ctx.lineTo(150, 150);

ctx.moveTo(180, 150);
ctx.lineTo(180, 50);
ctx.stroke();

<canvas width="250" height="250"></canvas>

​

在上面的示例中，您可以看到两条未连接的线，因为通过调用ctx.moveTo，我们开始绘制一条新路径。

Answer 3

正如其他人所说，moveTo()用于设置直线的起始点。如果您想重新绘制，但从另一个点开始，ctx.moveTo(x，y)将非常有用。

for (var i = 0, iMax = ys.length; i < iMax; i++) {
    ctx.lineTo(i, ys[i]);
}
//uncomment
// ctx.moveTo(20, ys[0]+20)
for (var i = 0, iMax = ys.length; i < iMax; i++) {
    ctx.lineTo(i+20, ys[i]+20);
}
ctx.stroke();

编辑此笔以查看差异：https://codepen.io/caiodv/pen/rrLMRm