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;
}

HTML5 Canvas基本线条动画

1 个答案: