PDA

View Full Version : HTML5, canvas, and time-delay



algomeysa
09-24-2012, 02:00 AM
Ok, this is a pretty simple setup. I create an HTML5 canvas, make it 250 by 250 pixels, color it grey just to show where its boundaries are, then i put 6 blue circles across it:



<script>
var canvas=document.getElementById("mycanvas"),
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 250;
ctx.fillStyle="grey";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,250);
ctx.lineTo(250,250);
ctx.lineTo(250,0);
ctx.fill();
var circlex=0;
var circley=0;
ctx.fillStyle="blue";
ctx.beginPath();
for (i=0; i<6; i++)
{
ctx.arc(circlex,circley,25,0, Math.PI * 2, true);
ctx.fill();
circlex=circlex+50;
circley=circley+50;
}
</script>


my question, how can I put a time-delay in there? That is, rather than have all the circles display at once, say, put a 1-second delay before each one is drawn....

xelawho
09-24-2012, 02:38 AM
sounds like a job for setTimeout...



<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
ctx = canvas.getContext("2d");
canvas.width = canvas.height = 250;
ctx.fillStyle="grey";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,250);
ctx.lineTo(250,250);
ctx.lineTo(250,0);
ctx.fill();
var circlex=0;
var circley=0;
ctx.fillStyle="blue";
ctx.beginPath();
drawCircs();

function drawCircs(){
var circ=0;
ctx.arc(circlex,circley,25,0, Math.PI * 2, true);
ctx.fill();
circlex=circlex+50;
circley=circley+50;
circ++;
if(circ<5){
setTimeout(drawCircs,1000)
}
}
</script>

algomeysa
09-25-2012, 12:19 AM
sounds like a job for setTimeout...

Thanks! Only thing I had to change from yours was where you had
var circ=0;
inside function drawCircs() --- that put the drawing of circles into an endless loop (although that wasn't immediately apparent because the other circles were being drawn off the canvas).