1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>clock</title>
6 </head>
7 <body>
8 <canvas id="clock" width="500" height="500" style="display:block; margin:50px auto">
9 您的浏览器不支持canvas标签!
10 </canvas>
11 <script>
12 var clock = document.getElementById('clock');
13 var ctx = clock.getContext('2d');
14 function drawClock(){
15 var today = new Date();
16 var year = today.getFullYear();
17 var month = today.getMonth() + 1;
18 var date = today.getDate();
19 var day = today.getDay();
20 var hour = today.getHours();
21 var minute = today.getMinutes();
22 var second = today.getSeconds();
23 hour = hour > 12 ? hour - 12 : hour;
24
25 ctx.clearRect(0, 0, 500, 500);
26
27 ctx.fillStyle = '#fff';
28 ctx.beginPath();
29 ctx.arc(250, 250, 205, 0, 2*Math.PI);
30 ctx.closePath();
31 ctx.fill();
32
33 ctx.strokeStyle = '#ddd';
34 ctx.lineWidth = 10;
35 ctx.beginPath();
36 ctx.arc(250, 250, 185, 0, 2*Math.PI);
37 ctx.closePath();
38 ctx.stroke();
39
40 ctx.strokeStyle = '#96DFF7';
41 ctx.lineWidth = 10;
42 ctx.beginPath();
43 ctx.arc(250, 250, 200, 0, 2*Math.PI);
44 ctx.closePath();
45 ctx.stroke();
46
47 ctx.strokeStyle = '#96DFF7';
48 ctx.lineWidth = 3;
49 ctx.beginPath();
50 ctx.arc(250, 250, 192, 0, 2*Math.PI);
51 ctx.closePath();
52 ctx.stroke();
53
54 ctx.strokeStyle = '#09303C';
55 ctx.lineWidth = 5;
56 ctx.beginPath();
57 ctx.arc(250, 250, 205, 0, 2*Math.PI);
58 ctx.closePath();
59 ctx.stroke();
60
61
62 // 时刻度
63 for(var i = 0; i < 12; i++) {
64 ctx.save();
65 ctx.lineWidth = 4;
66 ctx.strokeStyle = '#000';
67 ctx.translate(250, 250);
68 ctx.rotate(30 * i / 180 * Math.PI);
69 ctx.beginPath();
70 ctx.moveTo(0, 180);
71 ctx.lineTo(0, 160);
72 ctx.closePath();
73 ctx.stroke();
74 ctx.restore();
75 }
76 // 分刻度
77 for(var i = 0; i < 60; i++) {
78 if(i % 5 != 0){
79 ctx.save();
80 ctx.lineWidth = 2;
81 ctx.strokeStyle = '#000';
82 ctx.translate(250, 250);
83 ctx.rotate(6 * i / 180 * Math.PI);
84 ctx.beginPath();
85 ctx.moveTo(0, 175);
86 ctx.lineTo(0, 170);
87 ctx.closePath();
88 ctx.stroke();
89 ctx.restore();
90 }
91 }
92
93 // 秒针
94 ctx.save();
95 ctx.lineWidth = 2;
96 ctx.strokeStyle = "#f00";
97 ctx.beginPath();
98 ctx.translate(250, 250);
99 ctx.rotate((second * 6 + 180) / 180 * Math.PI);
100 ctx.moveTo(0, 0);
101 ctx.lineTo(0, 150);
102 ctx.closePath();
103 ctx.stroke();
104 ctx.restore();
105
106 // 分针
107 ctx.save();
108 ctx.lineWidth = 4;
109 ctx.strokeStyle = "#0ff";
110 ctx.beginPath();
111 ctx.translate(250, 250);
112 ctx.rotate((minute * 6 + second * 0.1 + 180) / 180 * Math.PI);
113 ctx.moveTo(0, 0);
114 ctx.lineTo(0, 130);
115 ctx.closePath();
116 ctx.stroke();
117 ctx.restore();
118
119 // 时针
120 ctx.save();
121 ctx.lineWidth = 6;
122 ctx.strokeStyle = "#000";
123 ctx.beginPath();
124 ctx.translate(250, 250);
125 ctx.rotate((hour * 30 + minute * 0.5 + 180) / 180 * Math.PI);
126 ctx.moveTo(0, 0);
127 ctx.lineTo(0, 90);
128 ctx.closePath();
129 ctx.stroke();
130 ctx.restore();
131
132 ctx.fillStyle = "#f00";
133 ctx.beginPath();
134 ctx.arc(250, 250, 10, 0, 2 * Math.PI);
135 ctx.closePath();
136 ctx.fill();
137 ctx.fillStyle = "#000";
138 ctx.beginPath();
139 ctx.arc(250, 250, 8, 0, 2 * Math.PI);
140 ctx.closePath();
141 ctx.fill();
142 ctx.fillStyle = "#fff";
143 ctx.beginPath();
144 ctx.arc(250, 250, 6, 0, 2 * Math.PI);
145 ctx.closePath();
146 ctx.fill();
147
148 }
149 drawClock();
150 setInterval(drawClock,10);
151 </script>
152 </body>
153 </html>
