animating canvas line draw one after the other

Question

I thought what I was trying to do was simple! But I'm struggling. I've got this funky grid drawn, but i want to 'see' it be draw animating one line after the other, I' thought by using the timeout and animateframe that it would animate and draw each line in succession but it keeps just 'appearing' rather than animating, what am i missing?!

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

markE · Accepted Answer · 2014-08-28 15:14:34Z

A Demo: http://jsfiddle.net/m1erickson/xkxwnf3k/

Define each individual line in an object and put those objects in an array:

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

Then you can individually animate the lines in the array with your animation loop:

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

Collectives™ on Stack Overflow

animating canvas line draw one after the other

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related