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();

var can=document.getElementById（“can”）；
var ctx=can.getContext（“2d”）；
var w=罐宽；var h=罐高；
变量ys=[1,3,2,4,5,3,2,4,5,6,7,3]；
ctx.beginPath（）；
对于（变量i=0，iMax=ys.length；i

它可以在chrome、firefox和ie11中使用，但我想知道代码的有效性和跨浏览器支持。我找不到任何关于它的提及，但我想肯定有人提到过它

---

因此，我的问题是，在使用

ctx.lineTo

之前，应该先使用

ctx.moveTo

，还是只使用

ctx.lineTo

就可以了（在

ctx.beginPath

之后），为什么？（我找不到这个问题的答案，但如果是重复的，很抱歉。）

我现在已经正确地签出了：

ctx.moveTo

函数只有在开始绘制新路径时才可以使用。和

ctx.lineTo

函数，您可以使用它来代替

ctx.moveTo

函数

如果你只写

ctx.lineTo（50，50）

，那么计算机就像

ctx.moveTo（50，50）一样理解它。如果没有从
ctx.lineTo
进行以下调用，则无法绘制。在这种情况下，您必须在此调用之后再次使用下一次从
ctx.lineTo
调用


var ctx=document.querySelector（'canvas'）.getContext（'2d'）；
ctx.lineTo（50，50）；//就像搬家一样
ctx.lineTo（150150）；
ctx.moveTo（180150）；
ctx.lineTo（180,50）；
ctx.stroke（）
我现在已经正确地签出了：

ctx.moveTo
函数只有在开始绘制新路径时才可以使用。和
ctx.lineTo
函数，您可以使用它来代替
ctx.moveTo
函数

如果你只写
ctx.lineTo（50，50）
，那么计算机就像
ctx.moveTo（50，50）一样理解它。如果没有从
ctx.lineTo
进行以下调用，则无法绘制。在这种情况下，您必须在此调用之后再次使用下一次从
ctx.lineTo
调用


var ctx=document.querySelector（'canvas'）.getContext（'2d'）；
ctx.lineTo（50，50）；//就像搬家一样
ctx.lineTo（150150）；
ctx.moveTo（180150）；
ctx.lineTo（180,50）；
ctx.stroke（）
不，如果您刚刚调用了
beginPath
，则无需在
lineTo
之前调用
moveTo

根据：

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

如果两个参数中有一个是无穷大或NaN，则返回
如果对象的路径没有子路径，则确保有（x，y）的子路径
否则，使用直线将子路径中的最后一点连接到给定点（x，y），然后将给定点（x，y）添加到子路径
调用
beginPath
后，对象的路径没有子路径，因此，我们以该算法的第二个项目符号结束

要实现的算法是：

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

因此，在
beginPath
之后第一次调用
lineTo
实际上转换为
moveTo
调用


var ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
ctx.lineTo（120120）；//转换为moveTo
ctx.lineTo（200150）；
ctx.stroke（）
不，如果您刚刚调用了
beginPath
，则无需在
lineTo
之前调用
moveTo

根据：

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

如果两个参数中有一个是无穷大或NaN，则返回
如果对象的路径没有子路径，则确保有（x，y）的子路径
否则，使用直线将子路径中的最后一点连接到给定点（x，y），然后将给定点（x，y）添加到子路径
调用
beginPath
后，对象的路径没有子路径，因此，我们以该算法的第二个项目符号结束

要实现的算法是：

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

因此，在
beginPath
之后第一次调用
lineTo
实际上转换为
moveTo
调用


var ctx=canvas.getContext（'2d'）；
ctx.beginPath（）；
ctx.lineTo（120120）；//转换为moveTo
ctx.lineTo（200150）；
ctx.stroke（）
正如其他人所说，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();

for（变量i=0，iMax=ys.length；i

编辑此笔以查看差异：
正如其他人所说，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();

for（变量i=0，iMax=