HTML5 Game - Use rotation to draw clock arm

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

Description

Use rotation to draw clock arm

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 ava 2s .  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); 

         
        // rotate the hands 
        context.rotate(1); 
                
        // 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