本文實例為大家分享了canvas實現文字時鐘的具體代碼，供大家參考，具體內容如下
先看看效果圖
代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <canvas id="myCanvas" width="600" height="600">您的瀏覽器不支持canvas</canvas><script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.translate(300,300); function Clock(ctx){ this.ctx = ctx; // canvas 2d畫筆 this.h = ''; // 小時 this.m = ''; // 分鐘 this.s = ''; // 秒鐘 this.year = ''; // 年份 this.mon = ''; // 月份 this.da = ''; // 日期 this.day = ''; // 星期 this.timer = null; // 定時器 this.numberText = ['零','一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','三十','三十一']; this.H=['零點','一點','二點','三點','四點','五點','六點','七點','八點','九點','十點','十一點','十二點','十三點','十四點','十五點','十六點','十七點','十八點','十九點','二十點','二十一點','二十二點','二十三點']; this.M=['零分','一分','二分','三分','四分','五分','六分','七分','八分','九分','十分','十一分','十二分','十三分','十四分','十五分','十六分','十七分','十八分','十九分','二十分','二一分','二十二分','二十三分','二十四分','二十五分','二十六分','二十七分','二十八分','二十九分','三十分','三十一分','三十二分','三十三分','三十四分','三十五分','三十六分','三十七分','三十八分','三十九分','四十分','四十一分','四十二分','四十三分','四十四分','四十五分','四十六分','四十七分','四十八分','四十九分','五十分','五十一分','五十二分','五十三分','五十四分','五十五分','五十六分','五十七分','五十八分','五十九分']; this.S=['零秒','一秒','二秒','三秒','四秒','五秒','六秒','七秒','八秒','九秒','十秒','十一秒','十二秒','十三秒','十四秒','十五秒','十六秒','十七秒','十八秒','十九秒','二十秒','二一秒','二十二秒','二十三秒','二十四秒','二十五秒','二十六秒','二十七秒','二十八秒','二十九秒','三十秒','三十一秒','三十二秒','三十三秒','三十四秒','三十五秒','三十六秒','三十七秒','三十八秒','三十九秒','四十秒','四十一秒','四十二秒','四十三秒','四十四秒','四十五秒','四十六秒','四十七秒','四十八秒','四十九秒','五十秒','五十一秒','五十二秒','五十三秒','五十四秒','五十五秒','五十六秒','五十七秒','五十八秒','五十九秒']; this.draw = function(){ this.ctx.clearRect(-300,-300,600,600); // 中心小黑圓 this.ctx.beginPath(); this.ctx.arc(0,0,5,0,Math.PI*2,true); this.ctx.fill(); this.ctx.closePath(); // 畫長橫線 this.ctx.beginPath(); this.ctx.moveTo(0,0); this.ctx.lineTo(280,0); this.ctx.strokeStyle='#000'; this.ctx.stroke(); this.ctx.beginPath(); this.ctx.font='12px 微軟雅黑'; var yearText = ''; var arr = String(this.year).split(''); for(var n=0;n<arr.length;n++){ var num = Number(arr[n]); yearText += this.numberText[num]; } var weekday = this.day === 0 ? '星期日': '星期'+this.numberText[this.day]; // 星期 var moText = this.numberText[this.mon]+'月'+ this.numberText[this.da]+'日'; this.ctx.fillText(yearText+'年',10,-10); // 年份的文字 this.ctx.fillText(moText,10,20); // 月份/日期/星期的文字 this.ctx.fillText(weekday,10,40); // 月份/日期/星期的文字 this.drawClock(); } // 畫刻度 this.drawClock = function(){ // 時鐘 this.ctx.save(); // 保存當前狀態 this.ctx.rotate(Math.PI / 12 * this.h); for(var j=0; j < 24;j++){ this.ctx.beginPath(); var color = j === this.h ? '#000': '#ccc'; this.ctx.strokeStyle = color; this.ctx.font='12px 微軟雅黑'; this.ctx.strokeText(this.H[j],110,-5); this.ctx.closePath(); this.ctx.rotate(-Math.PI / 12); } this.ctx.restore(); // 恢復到上一次的狀態 // 分鐘 this.ctx.save(); this.ctx.rotate(Math.PI / 30 * this.m); for (var i=0; i < 60; i++){ this.ctx.beginPath(); var color = i === this.m ? '#000': '#ccc'; this.ctx.strokeStyle = color; this.ctx.strokeText(this.M[i],170,-5); this.ctx.closePath(); this.ctx.rotate(-Math.PI / 30); } this.ctx.restore(); // 秒鐘 this.ctx.save(); this.ctx.rotate(Math.PI / 30 * this.s); for (var k=0; k < 60; k++){ this.ctx.beginPath(); var color = k === this.s ? '#000': '#ccc'; this.ctx.strokeStyle = color; this.ctx.strokeText(this.S[k],230,-5); this.ctx.closePath(); this.ctx.rotate(-Math.PI / 30); } this.ctx.restore(); // ctx.rotate(-Math.PI / 30 * this.s); } // 初始化 this.init = function(){ var that = this; this.timer = setInterval(function(){ that.setTime(); that.draw(); },100); } // 停止 this.stop = function(){ clearInterval(this.timer); this.timer = null; } // 設置時間 this.setTime = function(){ var date = new Date(); this.year = date.getFullYear(); // 年, int this.mon = date.getMonth()+1; // 月分, int this.da = date.getDate(); // 日期, int this.day = date.getDay(); // 星期, int var hour = date.getHours(); // 時,int var minu = date.getMinutes(); // 分,int var sec = date.getSeconds(); // 秒，int // 毫秒數/1000 ,這里主要是為了做幀動畫 var minuScond = date.getMilliseconds()/1000; var second; // 秒，計算秒旋轉的角度, float var minute; // 分，計算分鐘的角度，float var ho; // 小時，計算小時的角度，float if(minuScond > 0.8){ second = Math.ceil(sec+ minuScond); second = second >= 60? 0:second; } else { second = sec+ minuScond; } // 秒鐘到了59，分鐘要過渡 if(sec === 59) { if(minuScond >= 0.8){ minute = Math.ceil(minu+ minuScond); minute = minute >=60 ? 0: minute; } else{ minute = minu + minuScond; } } else{ minute = minu; } // 秒數到了59和分鐘數到了59；時針要過渡 if(sec === 59 && minu===59){ if(minuScond >= 0.8){ ho = Math.ceil(hour+ minuScond); ho = ho >=24 ? 0: ho; } else{ ho = hour + minuScond; } } else{ ho = hour; } this.h = ho; // 小時 this.m = minute; // 分鐘 this.s = second; // 秒鐘 } } var clock = new Clock(ctx); clock.init();</script></body></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44189739/article/details/106530162
