For our new lesson I have prepared nice pure HTML5 clocks. This is pretty easy script, but it is very easy and impressive (as usual). Of course – anything necessary will be at canvas object.
Here are our demo and downloadable package:
Live Demo
download in package
Ok, download the source files and lets start coding !
Step 1. HTML
This is markup of our clocks. Here it is.
index.html
01 |
<!DOCTYPE html> |
02 |
< html lang = "en" > |
03 |
< head > |
04 |
< meta charset = "utf-8" /> |
05 |
< title >HTML5 Clocks | Script Tutorials</ title > |
06 |
< link href = "css/main.css" rel = "stylesheet" type = "text/css" /> |
07 |
< script src = "http://code.jquery.com/jquery-latest.min.js" ></ script > |
08 |
< script src = "js/script.js" ></ script > |
09 |
</ head > |
10 |
< body > |
11 |
< header > |
12 |
< h2 >HTML5 Clocks</ h2 > |
13 |
< a href = "http://www.script-tutorials.com/html5-clocks/" class = "stuts" >Back to original tutorial on < span >Script Tutorials</ span ></ a > |
14 |
</ header > |
15 |
< div class = "clocks" > |
16 |
< canvas id = "canvas" width = "500" height = "500" ></ canvas > |
17 |
</ div > |
18 |
</ body > |
19 |
</ html > |
Step 2. CSS
Here are all required stylesheets
css/main.css
1 |
.clocks { |
2 |
height : 500px ; |
3 |
margin : 25px auto ; |
4 |
position : relative ; |
5 |
width : 500px ; |
6 |
} |
Step 3. JS
js/script.js
01 |
// inner variables |
02 |
var canvas, ctx; |
03 |
var clockRadius = 250; |
04 |
var clockImage; |
05 |
06 |
// draw functions : |
07 |
function clear() { // clear canvas function |
08 |
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
09 |
} |
10 |
11 |
function drawScene() { // main drawScene function |
12 |
clear(); // clear canvas |
13 |
14 |
// get current time |
15 |
var date = new Date(); |
16 |
var hours = date.getHours(); |
17 |
var minutes = date.getMinutes(); |
18 |
var seconds = date.getSeconds(); |
19 |
hours = hours > 12 ? hours - 12 : hours; |
20 |
var hour = hours + minutes / 60; |
21 |
var minute = minutes + seconds / 60; |
22 |
23 |
// save current context |
24 |
ctx.save(); |
25 |
26 |
// draw clock image (as background) |
27 |
ctx.drawImage(clockImage, 0, 0, 500, 500); |
28 |
29 |
ctx.translate(canvas.width / 2, canvas.height / 2); |
30 |
ctx.beginPath(); |
31 |
32 |
// draw numbers |
33 |
ctx.font = '36px Arial' ; |
34 |
ctx.fillStyle = '#000' ; |
35 |
ctx.textAlign = 'center' ; |
36 |
ctx.textBaseline = 'middle' ; |
37 |
for ( var n = 1; n <= 12; n++) { |
38 |
var theta = (n - 3) * (Math.PI * 2) / 12; |
39 |
var x = clockRadius * 0.7 * Math.cos(theta); |
40 |
var y = clockRadius * 0.7 * Math.sin(theta); |
41 |
ctx.fillText(n, x, y); |
42 |
} |
43 |
44 |
// draw hour |
45 |
ctx.save(); |
46 |
var theta = (hour - 3) * 2 * Math.PI / 12; |
47 |
ctx.rotate(theta); |
48 |
ctx.beginPath(); |
49 |
ctx.moveTo(-15, -5); |
50 |
ctx.lineTo(-15, 5); |
51 |
ctx.lineTo(clockRadius * 0.5, 1); |
52 |
ctx.lineTo(clockRadius * 0.5, -1); |
53 |
ctx.fill(); |
54 |
ctx.restore(); |
55 |
56 |
// draw minute |
57 |
ctx.save(); |
58 |
var theta = (minute - 15) * 2 * Math.PI / 60; |
59 |
ctx.rotate(theta); |
60 |
ctx.beginPath(); |
61 |
ctx.moveTo(-15, -4); |
62 |
ctx.lineTo(-15, 4); |
63 |
ctx.lineTo(clockRadius * 0.8, 1); |
64 |
ctx.lineTo(clockRadius * 0.8, -1); |
65 |
ctx.fill(); |
66 |
ctx.restore(); |
67 |
68 |
// draw second |
69 |
ctx.save(); |
70 |
var theta = (seconds - 15) * 2 * Math.PI / 60; |
71 |
ctx.rotate(theta); |
72 |
ctx.beginPath(); |
73 |
ctx.moveTo(-15, -3); |
74 |
ctx.lineTo(-15, 3); |
75 |
ctx.lineTo(clockRadius * 0.9, 1); |
76 |
ctx.lineTo(clockRadius * 0.9, -1); |
77 |
ctx.fillStyle = '#0f0' ; |
78 |
ctx.fill(); |
79 |
ctx.restore(); |
80 |
81 |
ctx.restore(); |
82 |
} |
83 |
84 |
// initialization |
85 |
$( function (){ |
86 |
canvas = document.getElementById( 'canvas' ); |
87 |
ctx = canvas.getContext( '2d' ); |
88 |
89 |
// var width = canvas.width; |
90 |
// var height = canvas.height; |
91 |
92 |
clockImage = new Image(); |
93 |
clockImage.src = 'images/cface.png' ; |
94 |
95 |
setInterval(drawScene, 1000); // loop drawScene |
96 |
}); |
I have defined main timer to redraw scene. Each step (tick) script defines current time, and draw clock arrows (hour arrow, minute arrow and second arrow).
Live Demo
download in package
Conclusion
Hope that today’s html5 clocks was impressive for you as always. We have made another one nice html5 tutorial. I will be glad to see your thanks and comments. Good luck!