...

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



algomeysa
09-24-2012, 01: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, 01: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-24-2012, 11:19 PM
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).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum