简单，我如何使用数组为画布中的动画制作多行？

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坐标上的4条线x = 20，x = 40，x = 60，x = 80。 现在，您运行一个for循环遍历每个x坐标，分别绘制每一行。最后，最后添加增量topMinY += 2，澄清是topMinY = topMinY + 2的简写。