简单，我如何在画布中使用数组来创建多行动画？

Question

我是新来的编码和Javascript，我有点迷路。我正尝试创建多个线条，在刷新时进行动画处理。像这样...

http://jsfiddle.net/79zcp/6/

 if (min < max) { 
    context.beginPath(); 
    if (direction) { 
     context.moveTo(topMinX, topMinY); 
     topMinX = topMinX + 2; 
     context.lineTo(topMinX, topMaxY); 
    } else { 
     context.moveTo(topMinX, topMinY); 
     topMinY = topMinY + 2; 
     context.lineTo(topMaxX, topMinY); 
    } 
    context.lineWidth = 4; 
    context.stroke(); 
} 

}

但具有多行下去y轴间隔开约20个像素分开。

我的老师建议用数组制作多行，但我完全失去了。

Answer 1

我已经拨动小提琴创建一个新的：http://jsfiddle.net/UcrUj/3。
请注意，我已经更改了仅适用于垂直线的功能（direction变量现在已过时）。

你应该给我们一个数组作为x坐标。这里，该阵列是

linesX = [20, 40, 60, 80] 

指定的x坐标x = 20 4行中，x = 40，X = 60，并且x = 80。 现在，运行一个for循环通过每个的去x坐标，单独绘制每条线。最后在最后加上增量topMinY += 2，这是为了澄清topMinY = topMinY + 2的简写。