0
|
1 |
function init(){
|
|
2 |
clock();
|
|
3 |
setInterval('clock()',1000);
|
|
4 |
}
|
|
5 |
function clock(){
|
|
6 |
var now = new Date();
|
|
7 |
var ctx = document.getElementById('tutorial').getContext('2d');
|
|
8 |
ctx.save();
|
|
9 |
ctx.clearRect(0,0,150,150);
|
|
10 |
ctx.translate(75,75);
|
|
11 |
ctx.scale(0.4,0.4);
|
|
12 |
ctx.rotate(-Math.PI/2);
|
|
13 |
ctx.strokeStyle = "black";
|
|
14 |
ctx.fillStyle = "white";
|
|
15 |
ctx.lineWidth = 8;
|
|
16 |
ctx.lineCap = "round";
|
|
17 |
|
|
18 |
// Hour marks
|
|
19 |
ctx.save();
|
|
20 |
ctx.beginPath();
|
|
21 |
for (i=0;i<12;i++){
|
|
22 |
ctx.rotate(Math.PI/6);
|
|
23 |
ctx.moveTo(100,0);
|
|
24 |
ctx.lineTo(120,0);
|
|
25 |
}
|
|
26 |
ctx.stroke();
|
|
27 |
ctx.restore();
|
|
28 |
|
|
29 |
// Minute marks
|
|
30 |
ctx.save();
|
|
31 |
ctx.lineWidth = 5;
|
|
32 |
ctx.beginPath();
|
|
33 |
for (i=0;i<60;i++){
|
|
34 |
if (i%5!=0) {
|
|
35 |
ctx.moveTo(117,0);
|
|
36 |
ctx.lineTo(120,0);
|
|
37 |
}
|
|
38 |
ctx.rotate(Math.PI/30);
|
|
39 |
}
|
|
40 |
ctx.stroke();
|
|
41 |
ctx.restore();
|
|
42 |
|
|
43 |
var sec = now.getSeconds();
|
|
44 |
var min = now.getMinutes();
|
|
45 |
var hr = now.getHours();
|
|
46 |
hr = hr>=12 ? hr-12 : hr;
|
|
47 |
|
|
48 |
ctx.fillStyle = "black";
|
|
49 |
|
|
50 |
// write Hours
|
|
51 |
ctx.save();
|
|
52 |
ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
|
|
53 |
ctx.lineWidth = 14;
|
|
54 |
ctx.beginPath();
|
|
55 |
ctx.moveTo(-20,0);
|
|
56 |
ctx.lineTo(80,0);
|
|
57 |
ctx.stroke();
|
|
58 |
ctx.restore();
|
|
59 |
|
|
60 |
// write Minutes
|
|
61 |
ctx.save();
|
|
62 |
ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
|
|
63 |
ctx.lineWidth = 10;
|
|
64 |
ctx.beginPath();
|
|
65 |
ctx.moveTo(-28,0);
|
|
66 |
ctx.lineTo(112,0);
|
|
67 |
ctx.stroke();
|
|
68 |
ctx.restore();
|
|
69 |
|
|
70 |
// Write seconds
|
|
71 |
ctx.save();
|
|
72 |
ctx.rotate(sec * Math.PI/30);
|
|
73 |
ctx.strokeStyle = "#D40000";
|
|
74 |
ctx.fillStyle = "#D40000";
|
|
75 |
ctx.lineWidth = 6;
|
|
76 |
ctx.beginPath();
|
|
77 |
ctx.moveTo(-30,0);
|
|
78 |
ctx.lineTo(83,0);
|
|
79 |
ctx.stroke();
|
|
80 |
ctx.beginPath();
|
|
81 |
ctx.arc(0,0,10,0,Math.PI*2,true);
|
|
82 |
ctx.fill();
|
|
83 |
ctx.beginPath();
|
|
84 |
ctx.arc(95,0,10,0,Math.PI*2,true);
|
|
85 |
ctx.stroke();
|
|
86 |
ctx.fillStyle = "#555";
|
|
87 |
ctx.arc(0,0,3,0,Math.PI*2,true);
|
|
88 |
ctx.fill();
|
|
89 |
ctx.restore();
|
|
90 |
|
|
91 |
ctx.beginPath();
|
|
92 |
ctx.lineWidth = 14;
|
|
93 |
ctx.strokeStyle = '#325FA2';
|
|
94 |
ctx.arc(0,0,142,0,Math.PI*2,true);
|
|
95 |
ctx.stroke();
|
|
96 |
|
|
97 |
ctx.restore();
|
|
98 |
}
|
|
99 |
init();
|