For those of you who slip into a trance when you're developing cool projects, where time seems to melt away, this one's for you. In this recipe, we'll create a nifty animated clock to remind us of the real-world time outside of cyber space.
Follow these steps to animate the hour, minute, and second hands on a clock:
Link to the
Animation
class:<head> <script src="animation.js"> </script>
Instantiate an
Animation
object, get the canvas context, and define the clock radius:<script> window.onload = function(){ var anim = new Animation("myCanvas"); var canvas = anim.getCanvas(); var context = anim.getContext(); var clockRadius = 75;
Set the
stage()
function which gets the current time, calculates the angle for the hour hand, minute hand, and second hand, clears the canvas, and then draws the clock: