本篇文章手把手帶大家使用微信小程序創(chuàng)建一個(gè)畫布時(shí)鐘，希望對(duì)大家有所幫助！

今天做的是一個(gè)微信小程序畫布時(shí)鐘，也就是傳統(tǒng)的數(shù)字時(shí)鐘?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

直接上圖，效果如圖。

onLoad: function(){ 		//將全局變量Index保存在that中，里面函數(shù)調(diào)用 		var that = this 		//獲取系統(tǒng)信息 		wx.getSystemInfo({ 			//獲取系統(tǒng)信息成功，將系統(tǒng)窗口的寬高賦給頁面的寬高 			success: function(res) { 				that.width = res.windowWidth 				that.height = res.windowHeight 			} 		}) 	},

首先是要讀取屏幕的寬高，這是為了以后計(jì)算出時(shí)鐘的位置，讓它能夠擺在中心位置。

onReady: function(){ 		//調(diào)用canvasApp函數(shù) 		this.canvasClock() 		//對(duì)canvasAPP函數(shù)循環(huán)調(diào)用 		this.interval = setInterval(this.canvasClock,1000) 	},

onReady生命周期函數(shù)，監(jiān)聽頁面初次渲染完成。然后再加上定時(shí)器，沒一秒執(zhí)行一次this.canvasClock函數(shù)。

//重置畫布函數(shù) 		function reSet(){ 			context.height = context.height;//每次清除畫布，然后變化后的時(shí)間補(bǔ)上             context.translate(width/2, height/2);//設(shè)置坐標(biāo)軸原點(diǎn)             context.save();//保存中點(diǎn)坐標(biāo)1 		} 		//繪制中心圓和外面大圓 		function circle(){ 			//外面大圓 			context.setLineWidth(2);             context.beginPath();             context.arc(0, 0, width/2-30, 0, 2 * Math.PI,true);             context.closePath();             context.stroke();             //中心圓             context.beginPath();             context.arc(0, 0, 8, 0, 2 * Math.PI, true);             context.closePath();             context.stroke(); 		} 		//繪制字體 		function num(){ 			// var R = width/2-60;//設(shè)置文字距離時(shí)鐘中心點(diǎn)距離 			context.setFontSize(20)//設(shè)置字體樣式             context.textBaseline = "middle";//字體上下居中，繪制時(shí)間             for(var i = 1; i < 13; i++) {                 //利用三角函數(shù)計(jì)算字體坐標(biāo)表達(dá)式                 var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2);                 var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2);                 if(i==11||i==12){//調(diào)整數(shù)字11和12的位置                     context.fillText(i, x-12, y+9);                 }else {                     context.fillText(i, x-6, y+9);                 }             } 		} 		//繪制小格 		function smallGrid(){ 				context.setLineWidth(1);                 context.rotate(-Math.PI/2);//時(shí)間從3點(diǎn)開始，倒轉(zhuǎn)90度                 for(var i = 0; i < 60; i++) {                     context.beginPath();                     context.rotate(Math.PI / 30);                     context.moveTo(width/2-30, 0);                     context.lineTo(width/2-40, 0);                     context.stroke();                 }          }          //繪制大格          function bigGrid(){          	context.setLineWidth(5);             for(var i = 0; i < 12; i++) {                 context.beginPath();                 context.rotate(Math.PI / 6);                 context.moveTo(width/2-30, 0);                 context.lineTo(width/2-45, 0);                 context.stroke();             }          }

上面這部分相對(duì)來說是固定的，也就是不會(huì)動(dòng)的圓，刻度，數(shù)字等。不過因?yàn)槊看萎嫸夹枰宄淮萎嫴?，所以這一部分也需要再循環(huán)里面。

function move(){             var t = new Date();//獲取當(dāng)前時(shí)間             var h = t.getHours();//獲取小時(shí)             h = h>12?(h-12):h;//將24小時(shí)制轉(zhuǎn)化為12小時(shí)制             var m = t.getMinutes();//獲取分針             var s = t.getSeconds();//獲取秒針             context.save();//再次保存2             context.setLineWidth(7);             //旋轉(zhuǎn)角度=30度*（h+m/60+s/3600）             //分針旋轉(zhuǎn)角度=6度*（m+s/60）             //秒針旋轉(zhuǎn)角度=6度*s             context.beginPath();             //繪制時(shí)針             context.rotate((Math.PI/6)*(h+m/60+s/3600));             context.moveTo(-20,0);             context.lineTo(width/4.5-20,0);             context.stroke();             context.restore();//恢復(fù)到2,（最初未旋轉(zhuǎn)狀態(tài)）避免旋轉(zhuǎn)疊加             context.save();//3             //畫分針             context.setLineWidth(5);             context.beginPath();             context.rotate((Math.PI/30)*(m+s/60));             context.moveTo(-20,0);             context.lineTo(width/3.5-20,0);             context.stroke();             context.restore();//恢復(fù)到3，（最初未旋轉(zhuǎn)狀態(tài)）避免旋轉(zhuǎn)疊加             context.save();             //繪制秒針             context.setLineWidth(2);             context.beginPath();             context.rotate((Math.PI/30)*s);             context.moveTo(-20,0);             context.lineTo(width/3-20,0);             context.stroke();         }

最后這一步是最難的，難點(diǎn)在于計(jì)算時(shí)針，分針，秒針之前的關(guān)系。不過這些都是數(shù)學(xué)公式，只要把角度都計(jì)算好了，剩下的東西就好辦了。

原文地址：https://juejin.cn/post/7008355969600061447

作者：詩一樣的代碼