javascript - HTML5 Canvas 基本线条动画

Question

所以，我正在尝试通过一个小项目进入 HTML5 Canvas，该项目为现有标题制作动画，该标题由从一个点爆发的红色激光状线条组成。我能够按照自己的意愿绘制这些线条，并以不错的速度将它们作为一个整体进行动画处理，但我认为下一个障碍在我的脑海中:我希望每条线条都独立移动!

我有一个对象定义我的线条的起点，例如:

var myLines = {
      a: 1500,
      b: 700,
      c: 400,
      d: 310,
      e: 140,
      f: 60
    }

然后我用类似这样的循环绘制:

for (var i in myLines)
      {
        var cur = myLines[i];
        context.beginPath();
        context.moveTo(0, canvas.height);
        context.lineTo(canvas.width, myLine.y-cur);
        context.stroke();
      }

使用笨拙的递增方法:

var step = 1;

    if (myLine.y+step > canvas.height) {set = false;}
    if (myLine.y-step < 0) {set = true;}

    if (set) {
      myLine.y = myLine.y+step;

    } else {
      myLine.y = myLine.y-step;
    }

我知道上面的代码写得不好，我不适合这里，我白天在一个小厨房里当厨师，但我需要一些建议，谢谢!

Here's a fiddle看到这一切的行动。

提前致谢!

Answer 1

如果我是你，我会更改脚本，使每一行都是一个单独的对象，而不仅仅是一个偏移量。像这样的东西:

var line = { x: 0, y: 0, speed: 1 };

这样每一行都可以有自己的速度，在你的循环中，你可以做类似下面的事情来增加速度并在你到达屏幕边缘时翻转它:

line.x += line.speed;
if(/* edge of screen */) {
    line.speed = -line.speed;
}