Animating a clock

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.

Animating a clock

How to do it...

Follow these steps to animate the hour, minute, and second hands on a clock:

  1. Link to the Animation class:
    <head>
    <script src="animation.js">
    </script>
  2. 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 ...

Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial