javascript - 在一个 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 只有一个上下文 - 我刚刚在 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 知道如何清晰地连接一条线的相邻部分，但前提是它们是单个路径的一部分。如果您为每个线段创建一条新路径，这些线将无法正确连接。