2

因此，我正在尝试通过一个小项目进入 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;
    }

我知道上面的代码写得不好，我在这里不合群，我白天在一个小厨房里当厨师，但我想请教一些建议！

这是一个小提琴，可以看到这一切。

提前致谢！

4

1 回答 1

1

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

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

这样每条线都可以有自己的速度，在循环中，您可以执行以下操作来添加速度并在到达屏幕边缘时将其翻转：

line.x += line.speed;
if(/* edge of screen */) {
    line.speed = -line.speed;
}
于 2012-11-20T17:24:10.933 回答