1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *
8 {
9 margin: 0;
10 padding: 0;
11 }
12 #box
13 {
14 width: 500px;
15 height: 500px;
16 margin: 0 auto;
17 position: relative;
18 }
19 #cas
20 {
21 /*background: #ccc;*/
22 }
23 #time2
24 {
25 color: red;
26 background: black;
27 position: absolute;
28 bottom: 36%;
29 left: 35%;
30 }
31 </style>
32 </head>
33 <body>
34 <div id="box">
35 <canvas width="400" height="400" id="cas"></canvas>
36 <div id="time2"></div>
37 </div>
38 <script >
39 var cas=document.getElementById('cas');
40 var ctx=cas.getContext('2d');
41 var time2=document.getElementById('time2');
42 function clock () {
43 ctx.beginPath();
44 ctx.arc(200,200,190,0,2*Math.PI,false);
45 ctx.clip();
46 // ctx.stroke();
47 ctx.closePath();
48 //画圆盘
49 var img=new Image();
50 img.src='images/1.png';
51 img.onload=function () {
52 /* 获取时间*/
53 var time=new Date();
54 var h=time.getHours();
55 var m=time.getMinutes();
56 var s=time.getSeconds();
57 h=h>=11?h-12:h;//24小时制转换成12小时制
58 h=h+(m/60);//分钟转换成的小时
59 m=m+(s/60);//秒数转换成的分钟
60 time2.innerHTML=parseInt(h)+':'+parseInt(m)+":"+s;
61 /* 画背景图*/
62 ctx.drawImage(img,0,0,400,400);
63 /*中心原点*/
64 ctx.beginPath();
65 ctx.source='over';
66 ctx.arc(200,200,5,0,360,false);
67 ctx.fillStyle='yellow';
68 ctx.strokeStyle='pink';
69 ctx.stroke();
70 ctx.fill();
71 ctx.closePath();
72
73
74 for(var i=0;i<60;i++){//分刻度
75 ctx.save();//保存原始状态
76 ctx.beginPath();
77 ctx.translate(200,200);//改变中心位置
78 ctx.rotate(6*i*Math.PI/180);//每一个的旋转角度
79 ctx.moveTo(0,-190);
80 ctx.lineTo(0,-180);
81 ctx.strokeStyle='black';
82 ctx.lineWidth=10;
83 ctx.stroke();
84 ctx.closePath();
85 ctx.restore();//恢复初始状态
86 }
87 for(var i=0;i<12;i++){//时刻度
88 ctx.save();//保存原始状态
89 ctx.beginPath();
90 ctx.translate(200,200);//改变中心位置
91 ctx.rotate(30*i*Math.PI/180);//每一个的旋转角度
92 ctx.moveTo(0,-190);
93 ctx.lineTo(0,-170);
94 ctx.strokeStyle='red';
95 ctx.lineWidth=10;
96 ctx.stroke();
97 ctx.closePath();
98 ctx.restore();//恢复初始状态
99
100 /*时针*/
101 ctx.save();//保存状态
102 ctx.beginPath();
103 ctx.translate(200,200);
104 ctx.rotate(h*30*Math.PI/180);//时针旋转的角度
105 ctx.moveTo(0,0);
106 ctx.lineTo(0,-150);
107 ctx.strokeStyle='pink';
108 ctx.lineWidth=5;
109 ctx.stroke();
110 ctx.closePath();
111 ctx.restore();
112
113 /*分针走动*/
114 ctx.save();//保存状态
115 ctx.beginPath();
116 ctx.translate(200,200);
117 ctx.rotate(m*6*Math.PI/180);//分针旋转的角度
118 ctx.moveTo(0,0);
119 ctx.lineTo(0,-165);
120 ctx.strokeStyle='yellow';
121 ctx.lineWidth=3;
122 ctx.stroke();
123 ctx.closePath();
124 ctx.restore();
125
126 /*秒针走动*/
127 ctx.save();//保存状态
128 ctx.beginPath();
129 ctx.translate(200,200);
130 ctx.rotate(s*6*Math.PI/180);//秒针旋转的角度
131 ctx.moveTo(0,0);
132 ctx.lineTo(0,-180);
133 ctx.strokeStyle='blue';
134 ctx.lineWidth=1;
135 ctx.stroke();
136 ctx.closePath();
137 //秒针点
138 ctx.beginPath();
139 ctx.arc(0,-160,3,0,360,false);
140 ctx.fillStyle='yellow';
141 ctx.fill();
142 ctx.restore();
143
144 }
145 }
146 }
147 clock();
148 setInterval(clock,1000);
149 </script>
150 </body>
151 </html>
