效果图：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Canvas</title>
9 <style>
10 .clock {
11 width: 400px;
12 margin: 100px auto;
13 border-radius: 20px;
14 background: #ddd;
15 }
16 </style>
17 </head>
18
19 <body>
20
21 <div class="clock">
22 <canvas width="400px" height="400px" id="canvas"></canvas>
23 </div>
24
25 <script>
26 var canvas = document.querySelector("#canvas");
27 var ctx = canvas.getContext("2d");
28
29 var w = h = 400; // 时钟宽高
30 var x = y = 200; // 始终中心坐标
31 var r = 180; // 时钟半径
32 var r_hour = 60; // 时针长度
33 var r_minute = 120; // 分针长度
34 var r_second = 140; // 秒针长度
35 var r_text = 140; // 定义表盘文字半径
36 var r_square = 165; // 刻度位置
37 var r_circle = 10; // 表盘小圆点
38 var deg = Math.PI * 2 // 圆周
39
40 function drawLine(x1, y1, x2, y2, color, width) {
41 ctx.beginPath();
42 ctx.moveTo(x1, y1);
43 ctx.lineTo(x2, y2);
44 ctx.strokeStyle = color || "#000";
45 ctx.lineWidth = width;
46 ctx.lineCap = "round";
47 ctx.stroke();
48 ctx.closePath();
49 }
50
51 function drawCricle(x, y, r, color) {
52 ctx.beginPath();
53 ctx.arc(x, y, r, 0, Math.PI * 2);
54 ctx.fillStyle = color || "#000";
55 ctx.fill();
56 }
57
58 function drawText(text, x, y) {
59 ctx.font = "20px 微软雅黑";
60 ctx.textAlign = "center";
61 ctx.textBaseline = "middle";
62 ctx.fillText(text, x, y);
63 }
64
65 // step_01 画圆盘
66 ctx.translate(w / 2, h / 2);
67
68 function clock() {
69 drawCricle(0, 0, 180, "#fff");
70
71 // step_02 画时钟的表针
72 var date = new Date();
73 var hour = date.getHours() * (deg / 12) - deg / 4; // [0-23]
74 var minute = date.getMinutes() * (deg / 60) - deg / 4; // 0-59
75 var second = date.getSeconds() * (deg / 60) - deg / 4; // 0-59
76 // drawLine(0, 0, 0, r_hour, "#000", 10);
77 // drawLine(0, 0, 0, r_minute, "#000", 5);
78 // drawLine(0, 0, 0, r_second, "#f00", 3);
79 drawLine(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), "#000", 10);
80 drawLine(0, 0, r_minute * Math.cos(minute), r_minute * Math.sin(minute), "#000", 5);
81 drawLine(0, 0, r_second * Math.cos(second), r_second * Math.sin(second), "#F00", 3);
82
83 // step_03 画表盘小圆点
84 drawCricle(0, 0, r_circle, "#000");
85
86 // step_04 画数字
87 /*
88 计算圆周坐标(x,y)
89 x = x + r*cos(angle)
90 y = y + r*sin(angle)
91 */
92 for (var i = 1; i < 13; i++) {
93 var angle = ((Math.PI * 2) / 12) * i - Math.PI / 2;
94 var x1 = 0 + r_text * Math.cos(angle)
95 var y1 = 0 + r_text * Math.sin(angle)
96 drawText(i, x1, y1)
97 }
98
99 // step_05 画刻度
100 for (var i = 1; i <= 60; i++) {
101 var angle = ((Math.PI * 2) / 60) * i - Math.PI / 2;
102 var x1 = 0 + r * Math.cos(angle)
103 var y1 = 0 + r * Math.sin(angle)
104 if (i % 5 == 0) {
105 var x2 = 0 + r_square * Math.cos(angle)
106 var y2 = 0 + r_square * Math.sin(angle)
107 drawLine(x1, y1, x2, y2, "#999", 3);
108 } else {
109 var x2 = 0 + (r_square + 4) * Math.cos(angle)
110 var y2 = 0 + (r_square + 4) * Math.sin(angle)
111 drawLine(x1, y1, x2, y2, "#aaa", 2);
112 }
113
114 }
115
116 }
117
118 clock();
119 setInterval(() => {
120 clock();
121 }, 1000);
122 </script>
123 </body>
124
125 </html>