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

我是编码和Java的新手，我有点迷路。我正在尝试创建多行刷新动画。像这样的东西

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像素。

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

最佳答案

我已经分叉了小提琴来创建一个新的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的简写。

关于javascript - 很简单，如何在 Canvas 中使用一个动画数组来制作多行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15192109/