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();
|
---|