HTML5 Canvas基本线动画

所以，我正在尝试使用一个小项目来嵌入HTML5 Canvas，这个小项目将现有的包含红色激光线的线组成的标题动画化。我可以根据需要绘制这些线条，并以很快的速度将它们作为一个组进行动画制作，但下一个障碍位于我的头上，我想：我希望每条线都独立移动！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; 
    }

我知道上面的代码写得不好，我在这里我的联赛，我的工作d作为一个厨师在一间小厨房里度过这一天，但我想请一些建议！

Here's a fiddle看到它在行动。

在此先感谢！

来源

2012-11-03 Benji

你是什么意思独立移动？ – beeglebug

如果我是你，我会改变脚本，使每一行是一个单独的对象，而不是一个偏移量。喜欢的东西：

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

这样，每条线都可以有自己的速度，和你的循环里面，你可以这样做以下补充的速度和翻转它，当你到达屏幕的边缘：

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

来源

2012-11-20 17:24:10 beeglebug

HTML5 Canvas基本线动画

回答

相关问题