动画画布线一个接一个地绘制答案

【问题标题】：animating canvas line draw one after the other动画画布线一个接一个地绘制
【发布时间】：2014-10-22 11:33:54
【问题描述】：

我以为我想做的很简单！但我在挣扎。我已经绘制了这个时髦的网格，但我想“看到”它是一条接一条地绘制动画，我认为通过使用超时和动画帧它会连续动画和绘制每条线，但它保持只是'出现'而不是动画，我错过了什么？！

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

            }

【问题讨论】：

标签： javascript html animation canvas

【解决方案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;
}

【讨论】：