need a timer which counts and show progress in circle - Javascript Canvas

Javascript examples for Canvas:Circle

  1. HOME
  2. Javascript
  3. Canvas
  4. Circle

Description

need a timer which counts and show progress in circle

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.js"></script> 
      <style id="compiled-css" type="text/css">

canvas {/* w w  w .  jav a  2s .co m*/
   -webkit-transform : rotate(-90deg);
   -moz-transform : rotate(-90deg);
}
div { position: relative; z-index: 1; height: 100px; width: 100px; }
div span {
   position   : absolute;
   z-index    : 1;
   top        : 50%;
   margin-top : -0.6em;
   display    : block;
   width      : 100%;
   text-align : center;
   height     : 1.5em;
   color      : #0e0;
   font       : 1.5em Arial;
}


      </style> 
      <script type="text/javascript">
    $(function(){
window.onload = function() {
        canvas  = document.getElementById('timer'),
        seconds = document.getElementById('counter'),
        ctx     = canvas.getContext('2d'),
        sec     = seconds.innerHTML | 0,
        countdown = sec;
    ctx.lineWidth = 6;
    ctx.strokeStyle = "#00EE00";
    var
    startAngle = 0,
    time       = 0,
    intv       = setInterval(function(){
        var endAngle = (Math.PI * time * 2 / sec);
        ctx.arc(50, 50, 35, startAngle , endAngle, false);
        startAngle = endAngle;
        ctx.stroke();
        seconds.innerHTML = countdown--;
        if (++time > sec) { clearInterval(intv); }
    }, 1000);
}
    });

      </script> 
   </head> 
   <body>    
      <title>Canvas timer</title>   
      <div> 
         <canvas id="timer" width="100" height="100"></canvas> 
         <span id="counter">20</span> 
      </div>    
   </body>
</html>

Related Tutorials