javascript - 简单，如何使用数组在 Canvas 中制作多条动画动画？

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

我已经 fork 了 Fiddle 来创建一个新的: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 的简写。