Javascript 在一个循环中在一张画布上放两支钢笔？

这段代码在两支笔之间创建了一条线，就像我抓起你的笔让你写我想要的东西时，你试图在纸上写字一样

var pen=[];
pen[0]=$('#canvas')[0].getContext("2d");
pen[1]=$('#canvas')[0].getContext("2d");
pen[0].beginPath();
pen[1].beginPath();
var y=[[],[]];     // two arrays of pixel values, numbers between 0-100
var x=0;
var i=y[0].length; // the arrays are both the same length
pen[0].moveTo(x,y[0][y[0].length-1]);
pen[1].moveTo(x,y[1][y[1].length-1]);
while(i--){
    x+=2;
    pen[0].lineTo(x,y[0][i]);
    pen[1].lineTo(x,y[1][i]);
    }
pen[0].stroke();
pen[1].stroke();

或者最好说；如果第一个数组只重复了数字100，而第二个数组只重复了0。我希望看到两条线平行画，但我得到的却是一个之字形

---

有没有一种方法可以只使用一个画布和一个循环来获得两条独立的线？

我认为问题在于$（'#canvas'）[0]。getContext（“2d”）只返回指向画布上下文对象的指针，所以当您为pen 0和pen 1获取它时，它实际上是同一个对象

这可能就是为什么会出现锯齿形——它是从上下文中最后绘制的像素到新位置绘制一条线

---

要绘制两条线，在从一条线切换到另一条线时，必须使用moveTo（x，y）在不绘制的情况下移动笔（上下文指针）。因为只有一个context对象，我想用两支笔恐怕不行。

每个画布只有一个context-我刚刚在Chrome 39中测试了它：

var c = document.createElement('canvas');
var x1 = c.getContext('2d');
var x2 = c.getContext('2d');
x1 === x2;  // true

虽然可以在一个循环中完成，但如果您对循环中的每个线段（即“移动到上一点，线到该点”）分别执行

moveTo

和

lineTo

，您会发现需要使用两个循环才能获得最佳结果

原因是Canvas知道如何干净地连接直线的相邻线段，但前提是它们是单个路径的一部分。如果为每条线段创建一条新路径，这些线将无法正确连接