javascript - 应该在ctx.lineTo之前使用ctx.moveTo

我无法在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.moveTo之前先使用ctx.lineTo还是先使用ctx.lineTo（在ctx.beginPath之后）完全可以，为什么？（我无法找到答案，但是如果它是重复的，则抱歉。）

最佳答案

不，如果您只是调用moveTo，则无需在lineTo之前调用beginPath。

根据specs：

  调用lineTo（x，y）方法时，必须运行以下步骤：


  如果两个参数中的任何一个为无限或NaN，则返回。
  如果对象的路径没有子路径，请确保存在（x，y）的子路径。
  否则，使用直线将子路径中的最后一个点连接到给定点（x，y），然后将给定点（x，y）添加到子路径。


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

ensure there is a subpath的算法为：

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

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

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>