Rotating clock hands animation - Javascript Canvas

Javascript examples for Canvas:Animation

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

Description

Rotating clock hands animation

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>demo</title> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.js"></script> 
      <script type="text/javascript" src="http://randomibis.com/coolclock/coolclock.js"></script> 
      <script type="text/javascript">
  $(window).load(function(){//from w  ww . j a v  a 2  s  .  co m
    CoolClock.config.skins = {skin1:{
    outerBorder:{lineWidth:2, radius:95, color:"black", alpha:1 },
    smallIndicator:{lineWidth:2, startAt:88, endAt:92,color:"black", alpha:1 },
    largeIndicator:{lineWidth:4, startAt:79, endAt:92, color:"black", alpha:1 },
    hourHand:{lineWidth:8, startAt:-15,endAt:50, color:"black", alpha:1 },
    minuteHand:{lineWidth:7, startAt:-15, endAt:75, color:"black", alpha:1 },
    secondHand:{lineWidth:1, startAt:-20, endAt:85, color:"red", alpha:1 },
    secondDecoration:{lineWidth:1,startAt:70,radius:4,fillColor:"red",color:"red",alpha:1 }
}};
CoolClock.findAndCreateClocks();
});

      </script> 
      <!--[if lt IE 9]>
  <script type="text/javascript"
    src="http://randomibis.com/coolclock/excanvas.js"></script>
  <![endif]--> 
   </head> 
   <body> 
      <canvas id="clockid" class="CoolClock:skin1:200:false"> 
      </canvas>  
   </body>
</html>

Related Tutorials