1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>
1 var clock=document.getElementById("clock");
2 var cxt=clock.getContext("2d");
3 function drawNow(){
4 var now=new Date();
5 var hour=now.getHours();
6 var min=now.getMinutes();
7 var sec=now.getSeconds();
8 hour=hour>12?hour-12:hour;
9 hour=hour min/60;
10 //表盘(蓝色)
11 cxt.lineWidth=10;
12 cxt.strokeStyle="blue"
13 cxt.beginPath();
14 cxt.arc(250,250,200,0,360,false);
15 cxt.closePath();
16 cxt.stroke();
17 //刻度
18 //时刻度
19 for(var i=0;i<12;i ){
20 cxt.save();
21 cxt.lineWidth=7;
22 cxt.strokeStyle="black";
23 cxt.translate(250,250);
24 cxt.rotate(i*30*Math.PI/180);//旋转角度 角度*Math.PI/180=弧度
25 cxt.beginPath();
26 cxt.moveTo(0,-170);
27 cxt.lineTo(0,-190);
28 cxt.closePath();
29 cxt.stroke();
30 cxt.restore();
31 }
32 //分刻度
33 for(var i=0;i<60;i ){
34 cxt.save();
35 //设置分刻度的粗细
36 cxt.lineWidth=5;
37 //重置画布原点
38 cxt.translate(250,250);
39 //设置旋转角度
40 cxt.rotate(i*6*Math.PI/180);
41 //画分针刻度
42 cxt.strokeStyle="black";
43 cxt.beginPath();
44 cxt.moveTo(0,-180);
45 cxt.lineTo(0,-190);
46 cxt.closePath();
47 cxt.stroke();
48 cxt.restore();
49 }
50
51 //时针
52 cxt.save();
53 // 设置时针风格
54 cxt.lineWidth=7;
55 cxt.strokeStyle="black";
56 cxt.translate(250,250);
57 cxt.rotate(hour*30*Math.PI/180);
58 cxt.beginPath();
59 cxt.moveTo(0,-140);
60 cxt.lineTo(0,10);
61 cxt.closePath();
62 cxt.stroke();
63 cxt.restore();
64 //分针
65 cxt.save();
66 cxt.lineWidth=5;
67 cxt.strokeStyle="black";
68 //设置异次元空间分针画布的中心
69 cxt.translate(250,250);
70 cxt.rotate(min*6*Math.PI/180);
71 cxt.beginPath();
72 cxt.moveTo(0,-160);
73 cxt.lineTo(0,15);
74 cxt.closePath();
75 cxt.stroke()
76 cxt.restore();
77
78 //秒针
79 cxt.save();
80 //设置秒针的风格
81 //颜色:红色
82 cxt.strokeStyle="red";
83 cxt.lineWidth=3;
84 //重置原点
85 cxt.translate(250,250);
86 //设置角度
87 //cxt.rotate(330*Math.PI/180);
88 cxt.rotate(sec*6*Math.PI/180);
89
90 cxt.beginPath();
91 cxt.moveTo(0,-170);
92 cxt.lineTo(0,20);
93 cxt.closePath();
94 cxt.stroke();
95 //画出时针,分针,秒针的交叉点
96 cxt.beginPath();
97 cxt.arc(0,0,5,0,360,false);
98 cxt.closePath();
99 //设置填充
100 cxt.fillStyle="gray";
101 cxt.fill();
102 //cxt.strokeStyle="red";
103 cxt.stroke();
104
105 //画出秒针的小圆点
106 cxt.beginPath();
107 cxt.arc(0,-140,5,0,360,false);
108 cxt.closePath();
109 //设置填充
110 cxt.fillStyle="gray";
111 cxt.fill();
112 //cxt.strokeStyle="red";
113 cxt.stroke();
114
115
116 cxt.restore();
117
118
119
120 }
121 function drawClock(){
122 cxt.clearRect(0,0,500,500);
123 drawNow();
124 }
125 drawNow();
126 setInterval(drawClock,1000);