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
