1 <!doctype html>
2 <html>
3 <head>
4 <title>canvas</title>
5 </head>
6 <body>
7 <canvas id = "clock" width = "500px" height = "500px">
8 您的浏览器已过时，请更新！
9 </canvas>
10 <script type = "text/javascript">
11 var clock = document.getElementById("clock");
12 var cxt = clock.getContext("2d");
13
14 function drawClock(x) {
15 var y = x / 2;
16 var r = (x - 100) / 2;
17 var x1 = r - 10;
18 var x2 = r - 20;
19 var x3 = r - 30;
20 var x4 = r - 40;
21 var x5 = r - 50;
22 //清除画布
23 cxt.clearRect(0, 0, x, x);
24
25 var now = new Date;
26 var sec = now.getSeconds();
27 var min = now.getMinutes();
28 var hour = now.getHours();
29
30 //解决时针的问题：1、小时之间 2、19:59:30s
31 hour += min / 60;
32 hour = hour > 12 ? hour - 12 : hour;
33
34 //表盘
35 cxt.lineWidth = 10;
36 cxt.strokeStyle = "blue";
37 cxt.beginPath();
38 cxt.arc(y, y, r, 0, 360, false);
39 cxt.closePath();
40 cxt.stroke();
41 //时刻度
42 for (var i = 0; i < 12;i++ ) {
43 cxt.save();
44 cxt.lineWidth = 7;
45 cxt.strokeStyle = "#000";
46 cxt.translate(y, y);
47 cxt.rotate(i*30 * Math.PI / 180);
48 cxt.beginPath();
49 cxt.moveTo(0, -x1);
50 cxt.lineTo(0, -x3);
51 cxt.closePath();
52 cxt.stroke();
53 cxt.restore();
54 }
55 //分刻度
56 for (var i = 0; i < 60; i++) {
57 cxt.save();
58 cxt.lineWidth = 5;
59 cxt.strokeStyle = "#000";
60 cxt.translate(y, y);
61 cxt.rotate(i * 6 * Math.PI / 180);
62 cxt.beginPath();
63 cxt.moveTo(0, -x1);
64 cxt.lineTo(0, -x2);
65 cxt.closePath();
66 cxt.stroke();
67 cxt.restore();
68 }
69 //时针
70 cxt.save();
71 cxt.lineWidth = 7;
72 cxt.strokeStyle = "#000";
73 cxt.translate(y, y);
74 cxt.rotate(hour * 30 * Math.PI / 180);
75 cxt.beginPath();
76 cxt.moveTo(0, -x5);
77 cxt.lineTo(0, 10);
78 cxt.closePath();
79 cxt.stroke();
80 cxt.restore();
81 //分针
82 cxt.save();
83 cxt.lineWidth = 5;
84 cxt.strokeStyle = "#000";
85 cxt.translate(y, y);
86 cxt.rotate(min * 6 * Math.PI / 180);
87 cxt.beginPath();
88 cxt.moveTo(0, -x4);
89 cxt.lineTo(0, 15);
90 cxt.closePath();
91 cxt.stroke();
92 cxt.restore();
93 //秒针
94 cxt.save();
95 cxt.lineWidth = 3;
96 cxt.strokeStyle = "red";
97 cxt.translate(y, y);
98 cxt.rotate(sec * 6 * Math.PI / 180);
99 cxt.beginPath();
100 cxt.moveTo(0, -x3);
101 cxt.lineTo(0, 20);
102 cxt.closePath();
103 cxt.stroke();
104 cxt.lineWidth = 3;
105 cxt.strokeStyle = "red";
106 cxt.beginPath();
107 cxt.arc(0, 0, 5, 0, 360, false);
108 cxt.fillStyle = "gray";
109 cxt.fill();
110 cxt.closePath();
111 cxt.stroke();
112 cxt.lineWidth = 3;
113 cxt.strokeStyle = "red";
114 cxt.fillStyle = "red";
115 cxt.beginPath();
116 cxt.arc(0, -x5, 5, 0, 360, false);
117 cxt.fill();
118 cxt.closePath();
119 cxt.stroke();
120 cxt.restore();
121 }
122
123 //行走
124 drawClock(500);
125 setInterval("drawClock(500)", 1000);
126 </script>
127 </body>
128 </html>
