動畫畫布線畫一個接一個

Question

我以爲我想做的事很簡單！但我很掙扎。我已經畫出了這個時髦的網格，但我想'看到'它是一個接一個地畫出動畫，我想通過使用超時和animateframe來動畫和連續繪製每一行，但它只保留'出現'而不是動畫，我錯過了什麼？！

var fps = 15; 
      var c = document.getElementById("box2009"); 
      var ctx = c.getContext("2d"); 


      draw(); 

      function draw() { 

       setTimeout(function() { 

        ctx.strokeStyle = "rgb(0,0,0)"; 
        requestAnimationFrame(draw); 
        ctx.beginPath(); 
        ctx.moveTo(100, 5); 
        ctx.lineTo(289, 5); 
        ctx.lineTo(289, 69); 
        ctx.lineTo(100, 69); 
        ctx.lineTo(100, 2); 
        ctx.moveTo(5, 69); 
        ctx.lineTo(100, 69); 
        ctx.lineTo(100, 139); 
        ctx.lineTo(5, 139); 
        ctx.lineTo(5, 66); 
        ctx.moveTo(289, 69); 
        ctx.lineTo(289, 139); 
        ctx.lineTo(192, 139); 
        ctx.lineTo(192, 69); 
        ctx.moveTo(100, 139); 
        ctx.lineTo(192, 139); 
        ctx.lineTo(192, 215); 
        ctx.lineTo(100, 215); 
        ctx.lineTo(100, 139); 
        ctx.moveTo(289, 139); 
        ctx.lineTo(406, 139); 
        ctx.lineTo(406, 231); 
        ctx.lineTo(289, 231); 
        ctx.lineTo(289, 139); 
        ctx.moveTo(406, 231); 
        ctx.lineTo(513, 231); 
        ctx.lineTo(513, 325); 
        ctx.lineTo(406, 325); 
        ctx.lineTo(406, 231); 
        ctx.lineWidth = 5; 
        ctx.stroke(); 

       }, 1000/fps); 

      } 

Answer 1

演示：http://jsfiddle.net/m1erickson/xkxwnf3k/

定義對象中的每個單獨的線，並把這些對象的數組：

var lines=[]; 

lines.push({x0:100,y0:5, x1:289,y1:5}); 
lines.push({x0:289,y0:5, x1:289,y1:69}); 
lines.push({x0:289,y0:69,x1:100,y1:69}); 
lines.push({x0:100,y0:69,x1:100,y1:2}); 
... 

然後你就可以單獨陣列中的行與動畫動畫迴路：

var nextLine=0; 
var lastTime; 
var interval=500; 

// start the animation loop 
requestAnimationFrame(animate); 

function animate(time){ 

    if(nextLine<lines.length){ 
     requestAnimationFrame(animate); 
    } 

    if(!lastTime){lastTime=time;} 

    var elapsed=time-lastTime; 

    if(elapsed<interval){return;} 

    var line=lines[nextLine]; 
    ctx.beginPath(); 
    ctx.moveTo(line.x0,line.y0); 
    ctx.lineTo(line.x1,line.y1); 
    ctx.stroke(); 

    nextLine++; 

    lastTime=time; 
}