标签：canvas drawLine 08 ctx second minute var Math 时钟
效果图：
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>
标签：canvas,drawLine,08,ctx,second,minute,var,Math,时钟 来源： https://www.cnblogs.com/luwei0915/p/15734752.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。