javascript - 很简单，如何在画布中使用数组制作多行动画？

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