Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HTML5, canvas, and time-delay

    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:

    Code:
         <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....

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    sounds like a job for setTimeout...

    Code:
    <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>

  • Users who have thanked xelawho for this post:

    algomeysa (09-24-2012)

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •