今天做的是一個微信小程式畫布時鐘,也就是傳統的數位時鐘。【相關學習推薦:】
直接上圖,效果如圖。
onLoad: function(){ //將全域性變數Index儲存在that中,裡面函數呼叫 var that = this //獲取系統資訊 wx.getSystemInfo({ //獲取系統資訊成功,將系統視窗的寬高賦給頁面的寬高 success: function(res) { that.width = res.windowWidth that.height = res.windowHeight } }) },
首先是要讀取螢幕的寬高,這是為了以後計算出時鐘的位置,讓它能夠擺在中心位置。
onReady: function(){ //呼叫canvasApp函數 this.canvasClock() //對canvasAPP函數迴圈呼叫 this.interval = setInterval(this.canvasClock,1000) },
onReady生命週期函數,監聽頁面初次渲染完成。然後再加上定時器,沒一秒執行一次this.canvasClock函數。
//重置畫布函數 function reSet(){ context.height = context.height;//每次清除畫布,然後變化後的時間補上 context.translate(width/2, height/2);//設定座標軸原點 context.save();//儲存中點座標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;//設定文字距離時鐘中心點距離 context.setFontSize(20)//設定字型樣式 context.textBaseline = "middle";//字型上下居中,繪製時間 for(var i = 1; i < 13; i++) { //利用三角函數計算字型座標表示式 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){//調整數位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);//時間從3點開始,倒轉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(); } }
上面這部分相對來說是固定的,也就是不會動的圓,刻度,數位等。不過因為每次畫都需要清除一次畫布,所以這一部分也需要再回圈裡面。
function move(){ var t = new Date();//獲取當前時間 var h = t.getHours();//獲取小時 h = h>12?(h-12):h;//將24小時制轉化為12小時制 var m = t.getMinutes();//獲取分針 var s = t.getSeconds();//獲取秒針 context.save();//再次儲存2 context.setLineWidth(7); //旋轉角度=30度*(h+m/60+s/3600) //分針旋轉角度=6度*(m+s/60) //秒針旋轉角度=6度*s context.beginPath(); //繪製時針 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();//恢復到2,(最初未旋轉狀態)避免旋轉疊加 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();//恢復到3,(最初未旋轉狀態)避免旋轉疊加 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(); }
最後這一步是最難的,難點在於計算時針,分針,秒針之前的關係。不過這些都是數學公式,只要把角度都計算好了,剩下的東西就好辦了。
原文地址:https://juejin.cn/post/7008355969600061447
作者:詩一樣的程式碼
更多程式設計相關知識,請存取:!!
以上就是手把手教你使用小程式建立畫布時鐘(範例)的詳細內容,更多請關注TW511.COM其它相關文章!