动画画布线画一个接一个

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