1. Home
  2. Computer Programming

Computer Programming

Creating 2-D Animations on Canvas - live analogue clock

In this tutorial, you will learn the following in order:

  • How to run hour and minute hands at regular intervals.
  • How to choose an appropriate dial of your choice from a list.
  • Connect the clock with the timer of your own device - Smartphone, laptop,tablet or desktop.
Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore, Vivax Solutions strongly recommends Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access Amazon:

Live Analogue Clock

In this example, several methods of context object are used to create a live analogue clock on canvas.

It uses Date() method to get the hour, minutes and seconds at a given time to manipulate the hands of the clock by the use of coordinates..

For the dial, two images are used - with Arab numerals and Roman numerals.

A checkbox is used to give the user to choose either of them as he or she wishes.



  Roman Numerals  

 



The Code for Interactive Live Analogue Clock is as follows:

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var k;
staticDial(2);
function timing() {
//get date
var tme= new Date();
//get seconds
var s=tme.getSeconds();
//get minutes
var m=tme.getMinutes();
//get hours
var h=tme.getHours();
//coordinates for 'seconds' hand
var x1=190+120*Math.cos((270+6*s)*Math.PI/180);
var y1=150+120*Math.sin((270+6*s)*Math.PI/180);
//coordinates for minute hand
var x2=200+100*Math.cos((270+6*m)*Math.PI/180);
var y2=150+100*Math.sin((270+6*m)*Math.PI/180);
//coordinates for hour hand
if(h>12){
h=h+12;
if (m>15){h=h+0.5;}
}
var x3=200+80*Math.cos((270+30*h)*Math.PI/180);
var y3=150+80*Math.sin((270+30*h)*Math.PI/180);
// clear the canvas in after every 1000 ms
context.clearRect(0,0,400,300);
// condition for testing for dial-type
if (document.getElementById('chkdial').checked)
{ staticDial(1); }
else
{ staticDial(2); }
//seconds
context.beginPath();
context.moveTo(200,150);
context.lineTo(x1,y1);
//context.closePath();
context.strokeStyle='red';
context.lineWidth=3;
context.stroke();
//minutes
context.beginPath();
context.moveTo(200,150);
context.lineTo(x2,y2);
context.strokeStyle='blue';
context.lineWidth=6;
context.stroke();
//hours
context.beginPath();
context.moveTo(200,150);
context.lineTo(x3,y3);
context.strokeStyle='magenta';
context.lineWidth=8;
context.stroke();
//dial
context.beginPath();
context.arc(200,150,140,0,2*Math.PI,false);
context.strokeStyle='lightblue';
context.lineWidth=3;
context.stroke();
context.closePath();
//button at the centre to cover the terminals of hands
context.beginPath();
context.arc(200,150,10,0,2*Math.PI,false);
context.fillStyle='lightblue';
context.fill();
context.closePath();
}
// code for static dial
function staticDial(k) {
// background image of the canvas is determined by this - Arab numerals or Roman numerals
if (k == 1)
{ document.getElementById('myCanvas').style.backgroundImage = "url(../images/clock_r.jpg)"; }
else {
document.getElementById('myCanvas').style.backgroundImage = "url(../images/clock_n.jpg)";
//dial
context.beginPath();
context.arc(200, 150, 140, 0, 2 * Math.PI, false);
context.strokeStyle = 'lightblue';
context.lineWidth = 3;
context.stroke();
context.closePath();
}
</script>

 

All Canvas Animations