HTML5 Canvas Basic Line Animation

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