两支笔在一个 canvas 上一个循环？

Question

这段代码创建了一条在两支笔之间被撕裂的线，就像你试图在纸上写字而我抓住你的笔让你写下我想要的东西一样。

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 和一个循环并得到两条单独的线？

Answer 1

我认为问题在于 $('#canvas')[0].getContext("2d") 只会 return 指向 canvas 的指针上下文对象，因此当您为笔 0 和笔 1 获取它时，它实际上是同一个对象。

这可能就是您得到之字形的原因 - 它从该上下文上最后绘制的像素到您的新位置画了一条线。

要绘制两条线，当从一条线切换到另一条线时，您必须使用 moveTo(x,y) 移动笔（上下文指针）而不绘制。因为只有一个上下文对象，恐怕两支笔都行不通。

Answer 2

每个 canvas 只有一个上下文 - 我刚刚在 Chrome 39:

中测试过它

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

虽然可以在一个循环中完成，但如果您对内的每个线段分别执行moveTo和lineTo 循环（即`moveTo previousPoint, lineTo thisPoint）你会发现你需要使用两个循环来获得最好的结果。

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

两支笔在一个 canvas 上一个循环？

Two pens on one canvas in one loop?

javascript

loops

canvas