Post
Ask Question

Analog Clock Using HTML5

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:
  1. <body>  
  2.    <div>  
  3.       <h1>Clock Using HTML5</h1>  
  4.    </div>  
  5.    <canvas id='mycanvas' width='800' height='850'></canvas>  
  6.    <script src='Clockscript.js' type="text/javascript"></script>  
  7. </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 center and the createhand function to draw the lines that represent clock hands, like this:
  1. function createcircle() {  
  2.     context.beginPath();  
  3.     context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2, true);     
  4.     context.stroke();  
  5. }  
  6. function createnos() {  
  7.     var nos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  
  8. angle = 0,  
  9. nowidth = 0;  
  10.     nos.forEach(function (numeral) {  
  11.         angle = Math.PI / 6 * (numeral - 3);  
  12.         nowidth = context.measureText(numeral).width;  
  13.         context.fillText(numeral,canvas.width / 2 + Math.cos(angle) * (Hr) -nowidth / 2,canvas.height / 2 + Math.sin(angle) * (Hr) + font / 3);  
  14.     });  
  15. }  
  16. function createcenter() {  
  17.     context.beginPath();  
  18.     context.arc(canvas.width / 2, canvas.height / 2, 15, 0, Math.PI * 2, true);  
  19.     context.fill();  
  20. }  
  21. function createhand(loc, isHour) {  
  22.     var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2, handRadius = isHour ? r - x - Hx : r - x;  
  23.     context.moveTo(canvas.width / 2, canvas.height / 2);  
  24.     context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);   
  25.     context.stroke();  
  26. }  
  27. function createhands() {  
  28.     var date = new Date,  
  29. hour = date.getHours();  
  30.     hour = hour > 12 ? hour - 12 : hour;  
  31.     createhand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);  
  32.     createhand(date.getMinutes(), false, 0.5);  
  33.     createhand(date.getSeconds(), false, 0.2);  
  34. }  
  35. function createclock() {  
  36.     context.clearRect(0, 0, canvas.width, canvas.height);  
  37.     createcircle();  
  38.     createcenter();  
  39.     createhands();  
  40.     createnos();  
  41. } 
Step 3: We use CSS in the Head section of the HTML to provide the look and formatting of our HTML page, like this:
  1. <head>  
  2.     <title>Clock</title>  
  3.     <style>  
  4.     body  
  5.     {background:white;  
  6.      border:black;  
  7.      cursor:crosshair  
  8.         }  
  9.         #mycanvas  
  10.         {background:pink;  
  11.          border:thick solid #aaaaaa;  
  12.             }  
  13.     </style>  
  14. </head> 
The complete code looks like this:
  1. //HTML Code  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Clock</title>  
  5.     <style>  
  6.     body  
  7.     {background:white;  
  8.      border:black;  
  9.      cursor:crosshair  
  10.         }  
  11.         #mycanvas  
  12.         {background:pink;  
  13.          border:thick solid #aaaaaa;  
  14.             }  
  15.     </style>  
  16. </head>  
  17. <body>  
  18. <div><h1>Clock Using HTML5</h1></div>  
  19. <canvas id='mycanvas' width='800' height='850'></canvas>  
  20. <script src='Clockscript.js' type="text/javascript">  
  21.  </script>  
  22. </body>  
  23. <html>  
  24.   
  25. //JavaScript Code  
  26. var canvas = document.getElementById('mycanvas'),  
  27. context = canvas.getContext('2d'),  
  28. font = 35,  
  29. padding = 35,  
  30. x = canvas.width / 25,  
  31. Hx = canvas.width / 10,  
  32. space = 20,  
  33. r = canvas.width / 2 - padding,  
  34. Hr = r + space;  
  35. function createcircle() {  
  36.     context.beginPath();  
  37.     context.arc(canvas.width / 2, canvas.height / 2, r, 0, Math.PI * 2, true);     
  38.     context.stroke();  
  39. }  
  40. function createnos() {  
  41.     var nos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],  
  42. angle = 0,  
  43. nowidth = 0;  
  44.     nos.forEach(function (numeral) {  
  45.         angle = Math.PI / 6 * (numeral - 3);  
  46.         nowidth = context.measureText(numeral).width;  
  47.         context.fillText(numeral,canvas.width / 2 + Math.cos(angle) * (Hr) -nowidth / 2,canvas.height / 2 + Math.sin(angle) * (Hr) + font / 3);  
  48.     });  
  49. }  
  50. function createcenter() {  
  51.     context.beginPath();  
  52.     context.arc(canvas.width / 2, canvas.height / 2, 15, 0, Math.PI * 2, true);  
  53.     context.fill();  
  54. }  
  55. function createhand(loc, isHour) {  
  56.     var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2, handRadius = isHour ? r - x - Hx : r - x;  
  57.     context.moveTo(canvas.width / 2, canvas.height / 2);  
  58.     context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);   
  59.     context.stroke();  
  60. }  
  61. function createhands() {  
  62.     var date = new Date,  
  63. hour = date.getHours();  
  64.     hourhour = hour > 12 ? hour - 12 : hour;  
  65.     createhand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);  
  66.     createhand(date.getMinutes(), false, 0.5);  
  67.     createhand(date.getSeconds(), false, 0.2);  
  68. }  
  69. function createclock() {  
  70.     context.clearRect(0, 0, canvas.width, canvas.height);  
  71.     createcircle();  
  72.     createcenter();  
  73.     createhands();  
  74.     createnos();  
  75. }  
  76. context.font = font + 'px Arial';  
  77. loop = setInterval(createclock, 1000); 
Output
 
clock.jpg


Similar Articles