js基于canvas實(shí)現(xiàn)時(shí)鐘組件
canvas一直是前端開發(fā)中不可或缺的一種用來繪制圖形的標(biāo)簽元素，比如壓縮上傳的圖片、比如刮刮卡、比如制作海報(bào)、圖表插件等，很多人在面試的過程中也會(huì)被問到有沒有接觸過canvas圖形繪制。
定義canvas元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成。canvas標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形。
瀏覽器支持Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持
那么本篇文章就通過一個(gè)時(shí)鐘組件來熟悉使用一下關(guān)于canvas的api。
<!DOCTYPE html><html><head><meta charset='UTF-8' /><title>canvas時(shí)鐘</title><style>*{margin:0;padding:0;}body{text-align:center;padding-top:100px;}</style></head><body><canvas height='200px'></canvas><script>(function(win){function DrawClock(options){this.canvas = options.el;this.ctx = this.canvas.getContext(’2d’);//方法返回一個(gè)用于在畫布上繪圖的環(huán)境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); //在給定的矩形內(nèi)清除指定的像素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); //創(chuàng)建弧/曲線（用于創(chuàng)建圓形或部分圓）ctx.stroke();ctx.font = 16 * this.rem + 'px Arial';//設(shè)置或返回文本內(nèi)容的當(dāng)前字體屬性ctx.textAlign = 'center'; //設(shè)置或返回文本內(nèi)容的當(dāng)前對(duì)齊方式ctx.textBaseline = 'middle'; //設(shè)置或返回在繪制文本時(shí)使用的當(dāng)前文本基線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); //在畫布上繪制'被填充的'文本});//分鐘的刻度，每分鐘轉(zhuǎn)6degfor (var i = 0; i < 60; i++){ctx.save(); //保存當(dāng)前環(huán)境的狀態(tài)ctx.rotate(6 * i * Math.PI / 180); //旋轉(zhuǎn)當(dāng)前繪圖ctx.beginPath(); //起始一條路徑，或重置當(dāng)前路徑ctx.moveTo(0, -82 * this.rem); //把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條ctx.lineTo(0, -87 * this.rem); //添加一個(gè)新點(diǎn)，然后在畫布中創(chuàng)建從該點(diǎn)到最后指定點(diǎn)的線條ctx.closePath(); //創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑ctx.strokeStyle = ’#000’; //設(shè)置或返回用于筆觸的顏色、漸變或模式ctx.lineWidth = 1 * this.rem; //設(shè)置或返回當(dāng)前的線條寬度ctx.stroke(); //繪制已定義的路徑ctx.restore(); //返回之前保存過的路徑狀態(tài)和屬性}//小時(shí)的刻度，每小時(shí)轉(zhuǎn)30degfor (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'; //設(shè)置或返回線條的結(jié)束端點(diǎn)樣式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(); //填充當(dāng)前繪圖（路徑）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時(shí)鐘用到了canvas中大部分的api，通過學(xué)習(xí)canvas時(shí)鐘的代碼實(shí)現(xiàn)，很能了解canvas的屬性和方法，同時(shí)，實(shí)現(xiàn)時(shí)鐘效果時(shí)，用到了數(shù)學(xué)中的幾何模型正弦sin和余弦cos以及弧度的計(jì)算方法，又重溫了一把當(dāng)年學(xué)數(shù)學(xué)時(shí)的許多樂趣，可謂是一舉兩得。
時(shí)鐘效果圖如下：
以上就是js基于canvas實(shí)現(xiàn)時(shí)鐘組件的詳細(xì)內(nèi)容，更多關(guān)于canvas實(shí)現(xiàn)時(shí)鐘組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建（ Dovecot ）2. HTTP協(xié)議常用的請(qǐng)求頭和響應(yīng)頭響應(yīng)詳解說明（學(xué)習(xí)）3. ASP.NET MVC通過勾選checkbox更改select的內(nèi)容4. .NET SkiaSharp 生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)5. IntelliJ IDEA創(chuàng)建web項(xiàng)目的方法6. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)7. 原生JS實(shí)現(xiàn)記憶翻牌游戲8. .NET 6實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的示例詳解9. django創(chuàng)建css文件夾的具體方法10. ASP中實(shí)現(xiàn)字符部位類似.NET里String對(duì)象的PadLeft和PadRight函數(shù)
網(wǎng)公網(wǎng)安備