1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>画布时钟</title>
6 <style>
7 *{margin:0;padding: 0;}
8 canvas{margin:50px auto;border:1px solid #ccc;display: block;}
9 </style>
10 </head>
11 <body>
12 <canvas id="cvs" height="400" width="400"></canvas>
13 <script>
14 var cvs=document.getElementById("cvs")
15 var ctx=cvs.getContext("2d");
16 ctx.beginPath();
17 ctx.arc(200,200,190,0,2*Math.PI,false);
18 ctx.strokeStyle="red";
19 ctx.lineWidth=4;
20 ctx.stroke();
21 ctx.clip();
22 var image=new Image();
23 image.src="img/01.jpg";
24 image.onload=function(){
25 // ctx.drawImage(image,0,0)
26 //创建分针指针
27 function move(){
28 ctx.clearRect(0,0,400,400)
29 ctx.drawImage(image,0,0)
30 //fenzhen
31 for(var j=0;j<60;j++){
32 ctx.save();
33 ctx.linewidth=4;
34 ctx.translate(200,200);
35 ctx.rotate(6*j*Math.PI/180);
36 ctx.beginPath();
37 ctx.moveTo(0,180);
38 ctx.lineTo(0,190);
39 ctx.closePath();
40 ctx.restore();
41 ctx.strokeStyle="blue";
42 ctx.stroke();
43 }
44 //创建时针指针
45 for(var i=0;i<12;i++){
46 ctx.save();
47 ctx.lineWidth=6;
48 ctx.translate(200,200)
49 ctx.rotate(30*i*Math.PI/180)
50 ctx.beginPath();
51 ctx.moveTo(0,170);
52 ctx.lineTo(0,190);
53 ctx.closePath();
54 ctx.restore();
55 ctx.strokeStyle="red";
56 ctx.stroke();
57 }
58 //画时针 x向右为正方向；y向下为正方向
59 var nowDate=new Date();
60 var hour=nowDate.getHours();
61 var min=nowDate.getMinutes();
62 var sec=nowDate.getSeconds();
63 hour=hour>12?hour-12:hour;
64 hour=hour+(min/60);
65 min=min+(sec/60)
66 ctx.save();
67 ctx.lineWidth=10;
68 ctx.strokeStyle="pink";
69 ctx.translate(200,200);
70 ctx.rotate(hour*30*Math.PI/180);
71 ctx.beginPath();
72 ctx.moveTo(0,-120);
73 ctx.lineTo(0,10);
74 ctx.closePath();
75 ctx.stroke();
76 ctx.restore();
77 //画分针
78 ctx.save();
79 ctx.linewidth=8;
80 ctx.strokeStyle="yellow";
81 ctx.translate(200,200);
82 ctx.rotate(min*6*Math.PI/180);
83 ctx.beginPath();
84 ctx.moveTo(0,-140);
85 ctx.lineTo(0,10);
86 ctx.closePath();
87 ctx.stroke();
88 ctx.restore();
89 //画秒针
90 ctx.save();
91 ctx.linewidth=6;
92 ctx.strokeStyle="blue";
93 ctx.translate(200,200);
94 ctx.rotate(sec*6*Math.PI/180);
95 ctx.beginPath();
96 ctx.moveTo(0,-160);
97 ctx.lineTo(0,10);
98 ctx.closePath();
99 ctx.stroke();
100 ctx.restore();
101 }
102 move();
103 setInterval(move,1000)
104 }
105
106 </script>
107 </body>
108 </html>
