canvas一直是前端開發中不可或缺的一種用來繪制圖形的標簽元素，比如壓縮上傳的圖片、比如刮刮卡、比如制作海報、圖表插件等，很多人在面試的過程中也會被問到有沒有接觸過canvas圖形繪制。
定義
canvas元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成。
canvas標簽只是圖形容器，您必須使用腳本來繪制圖形。
瀏覽器支持
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持
那么本篇文章就通過一個時鐘組件來熟悉使用一下關于canvas的api。
|
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
|
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>canvas時鐘</title><style>*{margin:0;padding:0;}body{text-align:center;padding-top:100px;}</style></head><body><canvas id="clock" width="200px" height="200px"></canvas><script>(function(win){ function DrawClock(options){ this.canvas = options.el; this.ctx = this.canvas.getContext('2d');//方法返回一個用于在畫布上繪圖的環境 this.width = this.ctx.canvas.width; this.height = this.ctx.canvas.height; this.r = this.width / 2; this.rem = this.width / 200; this.digits = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; var self = this; self.init(); setInterval(function(){ self.init(); }, 1000); } DrawClock.prototype = { init: function(){ var ctx = this.ctx; ctx.clearRect(0, 0, this.width, this.height); //在給定的矩形內清除指定的像素 var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var hour = hours >= 12 ? hours - 12 : hours; var minute = minutes + seconds / 60; this.drawBackground(); this.drawHour(hour, minute); this.drawMinute(minute); this.drawSecond(seconds); this.drawDot(); ctx.restore(); }, drawBackground: function(){ var ctx = this.ctx; var self = this; ctx.save(); ctx.translate(this.r, this.r); //重新映射畫布上的 (0,0) 位置 ctx.beginPath(); ctx.lineWidth = 8 * this.rem; ctx.arc(0, 0, this.r - ctx.lineWidth / 2, 0, 2 * Math.PI, false); //創建弧/曲線（用于創建圓形或部分圓） ctx.stroke(); ctx.font = 16 * this.rem + "px Arial";//設置或返回文本內容的當前字體屬性 ctx.textAlign = "center"; //設置或返回文本內容的當前對齊方式 ctx.textBaseline = "middle"; //設置或返回在繪制文本時使用的當前文本基線 this.digits.forEach(function(number, i){ var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (self.r - 33 * self.rem); var y = Math.sin(rad) * (self.r - 33 * self.rem); ctx.fillText(number, x, y); //在畫布上繪制"被填充的"文本 }); //分鐘的刻度，每分鐘轉6deg for (var i = 0; i < 60; i++){ ctx.save(); //保存當前環境的狀態 ctx.rotate(6 * i * Math.PI / 180); //旋轉當前繪圖 ctx.beginPath(); //起始一條路徑，或重置當前路徑 ctx.moveTo(0, -82 * this.rem); //把路徑移動到畫布中的指定點，不創建線條 ctx.lineTo(0, -87 * this.rem); //添加一個新點，然后在畫布中創建從該點到最后指定點的線條 ctx.closePath(); //創建從當前點回到起始點的路徑 ctx.strokeStyle = '#000'; //設置或返回用于筆觸的顏色、漸變或模式 ctx.lineWidth = 1 * this.rem; //設置或返回當前的線條寬度 ctx.stroke(); //繪制已定義的路徑 ctx.restore(); //返回之前保存過的路徑狀態和屬性 } //小時的刻度，每小時轉30deg for (var i = 0; i < 12; i++){ ctx.save(); ctx.rotate(30 * i * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -79 * this.rem); ctx.lineTo(0, -87 * this.rem); ctx.closePath(); ctx.strokeStyle = '#000'; ctx.lineWidth = 2 * this.rem; ctx.stroke(); ctx.restore(); } }, drawHour: function(hour, minute){ var ctx = this.ctx; ctx.save(); ctx.beginPath(); var hRad = 2 * Math.PI / 12 * hour; var mRad = 2 * Math.PI / 12 / 60 * minute; ctx.rotate(hRad + mRad); ctx.lineWidth = 6 * this.rem; ctx.lineCap = "round"; //設置或返回線條的結束端點樣式 ctx.moveTo(0, 10 * this.rem); ctx.lineTo(0, -this.r / 2); ctx.stroke(); ctx.restore(); }, drawMinute: function(minute){ var ctx = this.ctx; ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.lineWidth = 3 * this.rem; ctx.lineCap = "round"; ctx.moveTo(0, 10 * this.rem); ctx.lineTo(0, -this.r + 26 * this.rem); ctx.stroke(); ctx.restore(); }, drawSecond: function(second){ var ctx = this.ctx; ctx.save(); ctx.beginPath(); ctx.fillStyle = "#c14543"; var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-3 * this.rem, 20 * this.rem); ctx.lineTo(3 * this.rem, 20 * this.rem); ctx.lineTo(1, -this.r + 26 * this.rem); ctx.lineTo(-1, -this.r + 26 * this.rem); ctx.fill(); //填充當前繪圖（路徑） ctx.restore(); }, drawDot: function(minute){ var ctx = this.ctx; ctx.beginPath(); ctx.fillStyle = "#fff"; ctx.arc(0, 0, 3 * this.rem, 0, 2 * Math.PI, false); ctx.fill(); } }; win.DrawClock = DrawClock;})(window);new DrawClock({el: document.getElementById("clock")});</script></body></html> |
只要心中有丘壑，就能耕出二畝田！canvas時鐘用到了canvas中大部分的api，通過學習canvas時鐘的代碼實現，很能了解canvas的屬性和方法，同時，實現時鐘效果時，用到了數學中的幾何模型正弦sin和余弦cos以及弧度的計算方法，又重溫了一把當年學數學時的許多樂趣，可謂是一舉兩得。
時鐘效果圖如下：
以上就是js基于canvas實現時鐘組件的詳細內容，更多關于canvas實現時鐘組件的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.cnblogs.com/tnnyang/p/8951804.html
