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。我希望看到两条线并行绘制，但我得到一个曲折。

有没有办法可以只使用一个画布和一个循环并获得两个单独的行？

Answer 1

我认为问题是$（＆＃39;＃canvas＆＃39;）[0] .getContext（＆＃34; 2d＆＃34;）只会返回一个指向画布上下文对象的指针，所以当你拿到笔0和笔1时，它真的是同一个对象。

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

要绘制两条线，您必须使用moveTo（x，y）移动笔（上下文的指针），而不是从一条线交换到另一条线时的绘图。因为只有一个上下文对象，我不认为有两支钢笔会起作用我害怕。

Answer 2

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

一个画布中的两个笔在一个循环中？

2 个答案: