js基于canvas實(shí)現(xiàn)時(shí)鐘組件
canvas一直是前端開(kāi)發(fā)中不可或缺的一種用來(lái)繪制圖形的標(biāo)簽元素，比如壓縮上傳的圖片、比如刮刮卡、比如制作海報(bào)、圖表插件等，很多人在面試的過(guò)程中也會(huì)被問(wèn)到有沒(méi)有接觸過(guò)canvas圖形繪制。
定義canvas元素用于圖形的繪制，通過(guò)腳本 (通常是JavaScript)來(lái)完成。canvas標(biāo)簽只是圖形容器，您必須使用腳本來(lái)繪制圖形。
瀏覽器支持Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持
那么本篇文章就通過(guò)一個(gè)時(shí)鐘組件來(lái)熟悉使用一下關(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à)布上繪圖的環(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); //重新映射畫(huà)布上的 (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); //在畫(huà)布上繪制'被填充的'文本});//分鐘的刻度，每分鐘轉(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)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線條ctx.lineTo(0, -87 * this.rem); //添加一個(gè)新點(diǎn)，然后在畫(huà)布中創(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(); //返回之前保存過(guò)的路徑狀態(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，通過(guò)學(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í)的許多樂(lè)趣，可謂是一舉兩得。
時(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. python 批量下載bilibili視頻的gui程序2. 詳解Vue中Axios封裝API接口的思路及方法3. python thrift 實(shí)現(xiàn) 單端口多服務(wù)的過(guò)程4. python 通過(guò)exifread讀取照片信息5. 使用css實(shí)現(xiàn)全兼容tooltip提示框6. python中HTMLParser模塊知識(shí)點(diǎn)總結(jié)7. python中if嵌套命令實(shí)例講解8. python:刪除離群值操作(每一行為一類數(shù)據(jù))9. CSS自定義滾動(dòng)條樣式案例詳解10. JSP實(shí)現(xiàn)客戶信息管理系統(tǒng)
網(wǎng)公網(wǎng)安備