1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title></title>
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 </head>
7 <body>
8 <canvas id="canvas" width="500" height="500"></canvas>
9 <script type="text/javascript">
10 var oCanvas = document.getElementById("canvas");
11 var context = oCanvas.getContext("2d");
12
13 function draw() {
14 //清除画布
15 context.clearRect(0, 0, 500, 500);
16 //背景
17 context.fillStyle = "#ffed00";
18 context.fillRect(0, 0, 500, 500);
19 //表盘
20 context.strokeStyle = "#000"
21 context.lineWidth = 5;
22 context.beginPath();
23 context.arc(250, 250, 200, 0, 360, false);
24 context.stroke();
25 context.closePath();
26 //分针刻度
27 context.save();
28 context.translate(250, 250);
29 for(var i = 0; i < 60; i++) {
30 context.rotate(Math.PI / 30)
31 context.beginPath();
32 context.moveTo(0, -180);
33 context.lineTo(0, -190);
34 context.stroke();
35 context.closePath();
36 }
37 context.restore();
38 //获取时间
39 var now = new Date();
40 var hour = now.getHours();
41 var min = now.getMinutes();
42 var sec = now.getSeconds();
43 hour= hour+min/60;
44 min= min+sec/60;
45 //时针刻度
46 context.save();
47 context.translate(250, 250);
48 for(var i = 0; i < 60; i++) {
49 context.rotate(Math.PI / 6)
50 context.beginPath();
51 context.moveTo(0, -170);
52 context.lineTo(0, -190);
53 context.stroke();
54 context.closePath();
55 }
56 context.restore();
57 //时针
58 context.save();
59 context.beginPath();
60 context.translate(250, 250);
61 context.rotate(Math.PI / 6*hour);
62 context.moveTo(0, 10);
63 context.lineWidth = 7;
64 context.lineTo(0, -140);
65 context.stroke();
66 context.closePath();
67 context.restore();
68 //分针
69 context.save();
70 context.beginPath();
71 context.translate(250, 250);
72 context.rotate(Math.PI / 30*min);
73 context.moveTo(0, 15);
74 context.lineWidth = 5;
75 context.lineTo(0, -160);
76 context.stroke();
77 context.closePath();
78 context.restore();
79 //秒针
80 context.save();
81 context.translate(250, 250);
82 context.rotate(Math.PI / 30 * sec);
83 context.beginPath();
84 context.strokeStyle = "red";
85 context.lineWidth = 3;
86 context.moveTo(0, 20);
87 context.lineTo(0, -185);
88 context.stroke();
89 context.closePath();
90 context.beginPath();
91 context.strokeStyle = "red";
92 context.fillStyle = "#FFFFFF";
93 context.lineWidth = 5;
94 context.arc(0, 0, 3, 0, 2 * Math.PI);
95 context.stroke();
96 context.fill();
97 context.closePath();
98 context.beginPath();
99 context.strokeStyle = "red";
100 context.fillStyle = "#FFFFFF";
101 context.lineWidth = 5;
102 context.arc(0, -160, 3, 0, 2 * Math.PI);
103 context.stroke();
104 context.fill();
105 context.closePath();
106 context.restore();
107 };
108 //先画一遍
109 draw();
110 //setInterval
111 setInterval(draw, 1000);
112 </script>
113 </body>
114
115 </html>
