HTML5 Game - Draw clock per second

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Clock Ticking

Description

Draw clock per second

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>/*ww  w  . ja  va 2s  .c o  m*/
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

    context.fillStyle='blue';
    context.arc(200, 200, 130, 0, 2 * Math.PI, true);
    context.fill();
    context.lineWidth = 2;
    context.translate(200,200);
    setInterval(drawSecond, 1000);
    
    function drawSecond() {
         context.strokeStyle = 'blue';
         context.beginPath();      
         context.moveTo(0,0);
         context.lineTo(0,-120);  
         context.stroke();
         
         context.rotate((2 * Math.PI) / 60);
         context.beginPath();     
         context.strokeStyle = 'white';   
         context.moveTo(0,0);
         context.lineTo(0,-120);  
         context.stroke();
    }
  
</script> 

</div>
</body>
</html>

Related Topic