HTML5 Canvas 基本线条动画答案

【问题标题】：HTML5 Canvas Basic Line AnimationHTML5 Canvas 基本线条动画
【发布时间】：2012-10-23 16:44:23
【问题描述】：

因此，我正在尝试通过一个小项目进入 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 来看看这一切。

提前致谢！

【问题讨论】：

独立移动到底是什么意思？

标签： javascript html animation canvas

【解决方案1】：

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

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

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

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

【讨论】：