HTML5 Game - Draw a clock

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

Description

Draw a clock

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>/*from  w w  w .j ava2s  . c  om*/
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

              
              // start the path 
              context.beginPath(); 
                      
              // draw outer circle 
              context.arc(100, 100, 99, 0, 2 * Math.PI, false); 
               
              // draw inner circle 
              context.moveTo(194, 100); 
              context.arc(100, 100, 94, 0, 2 * Math.PI, false); 
                      
              // translate to center 
              context.translate(100, 100); 
               
              // draw minute hand 
              context.moveTo(0, 0); 
              context.lineTo(0, -85); 
               
              // draw hour hand 
              context.moveTo(0, 0); 
              context.lineTo(-65, 0); 
               
              // stroke the path 
              context.stroke(); 

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

Related Topic