Reader Level:
ARTICLE

Analog Clock Using HTML5

Posted by Aditya Gaur Articles | HTML 5 June 07, 2012
In this article we create an analog clock using HTML5.
  • 0
  • 0
  • 6764

Introduction

In this article we learn how to create an analog clock using HTML5. We use a canvas element of HTML and moveTo, lineTo and stroke methods of the HTML5 canvas.

Step 1 : First we define the body of the HTML page, like this:

<body>
<
div><h1>Clock Using HTML5</h1></div>
<
canvas id='mycanvas' width='800' height='850'></canvas>
<
script src='Clockscript.js' type="text/javascript">
 </script
>
</
body>

Step 2 : Then we define the functionality using JavaScript. We use the createcircle function to draw the circle for the clock face, the createnos function to draw numbers on the clock, the createcentre function to draw a small filled circle at the clock centre and the createhand function to draw the lines that represent clock hands, like this:

function
createcircle() {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2, true);   
    context.stroke();
}

function
createnos() {
    var nos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
angle = 0,
nowidth = 0;
    nos.forEach(function (numeral) {
        angle = Math.PI / 6 * (numeral - 3);
        nowidth = context.measureText(numeral).width;
        context.fillText(numeral,canvas.width / 2 + Math.cos(angle) * (Hr) -nowidth / 2,canvas.height / 2 + Math.sin(angle) * (Hr) + font / 3);
    });
}

function
createcenter() {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2, 15, 0, Math.PI * 2, true);
    context.fill();
}

function
createhand(loc, isHour) {
    var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2, handRadius = isHour ? r - x - Hx : r - x;
    context.moveTo(canvas.width / 2, canvas.height / 2);
    context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius); 
    context.stroke();
}

function
createhands() {
    var date = new Date,
hour = date.getHours();
    hour = hour > 12 ? hour - 12 : hour;
    createhand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);
    createhand(date.getMinutes(), false, 0.5);
    createhand(date.getSeconds(), false, 0.2);
}

function
createclock() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    createcircle();
    createcenter();
    createhands();
    createnos();
}


Step 3 : We use CSS in the Head section of the HTML to provide the look and formatting of our HTML page, like this:

<
head>
    <title>Clock</title
>
    <style
>
   
body
    {background:white;
     border:black;
     cursor:
crosshair
        }
       
#mycanvas
        {background:pink;
         border:thick solid #aaaaaa;
            }
    </style
>
</
head>

The complete code looks like this:

//HTML Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Clock</title
>
    <style
>
   
body
    {background:white;
     border:black;
     cursor:
crosshair
        }
       
#mycanvas
        {background:pink;
         border:thick solid #aaaaaa;
            }
    </style
>
</
head>
<
body>
<
div><h1>Clock Using HTML5</h1></div>
<
canvas id='mycanvas' width='800' height='850'></canvas>
<
script src='Clockscript.js' type="text/javascript">
 </script
>
</
body>
<
html>

//JavaScript Code

var
canvas = document.getElementById('mycanvas'),
context = canvas.getContext('2d'),
font = 35,
padding = 35,
x = canvas.width / 25,
Hx = canvas.width / 10,
space = 20,
r = canvas.width / 2 - padding,
Hr = r + space;
function createcircle() {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2, true);   
    context.stroke();
}

function
createnos() {
    var nos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
angle = 0,
nowidth = 0;
    nos.forEach(function (numeral) {
        angle = Math.PI / 6 * (numeral - 3);
        nowidth = context.measureText(numeral).width;
        context.fillText(numeral,canvas.width / 2 + Math.cos(angle) * (Hr) -nowidth / 2,canvas.height / 2 + Math.sin(angle) * (Hr) + font / 3);
    });
}

function
createcenter() {
    context.beginPath();
    context.arc(canvas.width / 2, canvas.height / 2, 15, 0, Math.PI * 2, true);
    context.fill();
}

function
createhand(loc, isHour) {
    var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2, handRadius = isHour ? r - x - Hx : r - x;
    context.moveTo(canvas.width / 2, canvas.height / 2);
    context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius); 
    context.stroke();
}

function
createhands() {
    var date = new Date,
hour = date.getHours();
    hour = hour > 12 ? hour - 12 : hour;
    createhand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);
    createhand(date.getMinutes(), false, 0.5);
    createhand(date.getSeconds(), false, 0.2);
}

function
createclock() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    createcircle();
    createcenter();
    createhands();
    createnos();
}
context.font = font + 'px Arial';
loop = setInterval(createclock, 1000);


Output

clock.jpg

COMMENT USING

Trending up