javascript - 应该在 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.moveTo使用前 ctx.lineTo还是只使用 ctx.lineTo 就完全没问题？首先(在 ctx.beginPath 之后)，为什么？ (我找不到这方面的答案，但很抱歉，如果它是重复的。)

Answer 1

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

根据 specs :

The lineTo(x, y) method, when invoked, must run these steps:

1. If either of the arguments are infinite or NaN, then return.
2. If the object's path has no subpaths, then ensure there is a subpath for (x, y).
3. Otherwise, connect the last point in the subpath to the given point (x, y) using a straight line, and then add the given point (x, y) to the subpath.

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

算法到ensure there is a subpath是:

When the user agent is to ensure there is a subpath for a coordinate (x, y) on a path, the user agent must check to see if the path has its need new subpath flag set. If it does, then the user agent must create a new subpath with the point (x, y) as its first (and only) point, as if the moveTo() method had been called, and must then unset the path's need new subpath flag.

因此，在 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>