繪製微信小程式畫布時鐘
在之前的文章裡http://blog.csdn.net/weixin_36185028/article/details/53786993分享了用Html5畫布繪製了mac時鐘,微信小程式官方元件也提供了畫布功能,下面分享一下如何建立微信小程式畫布時鐘。
總體思路是對pages中的一個小程式頁面構建畫布時鐘邏輯程式,通過app.json公共設定來配置入口。
首先來看一下構建這樣一個小程式所需要的目錄結構
從目錄結構就可以看出來這個程式是簡單的單層頁面,畫布渲染在pages下面的index頁面上。
其中對程式有實際驅動作用的程式碼分別在index.js,index.wxml,index.wxss和app.json這幾個檔案中
Index.js檔案裡面存放著程式的邏輯層資料,是程式的核心。
1)考慮到適應不同的手機大小,定義了兩個變數width和height,當頁面載入時(onLoad)獲取系統視窗的值作為index頁面的大小;
2)頁面初次渲染後給index新增時鐘函式canvasClock(),並設定定時器,每一秒重新整理一次畫布,呈現出時鐘運動的效果
3)在時鐘函式canvasClock()中進行繪製時鐘頁面所需的元素以其其運動函式,並對其進行呼叫drawClock(),通過呼叫小程式wx.drawCanvas方法來指定index為繪製頁面和繪製行為
4)當程式退出時,清除計時器
程式碼如下:
// 獲取應用例項 Page({ data:{ width:0, height:0 }, //onLoad生命週期函式,監聽頁面載入 onLoad: function(){ //將全域性變數Index儲存在that中,裡面函式呼叫 var that = this //獲取系統資訊 wx.getSystemInfo({ //獲取系統資訊成功,將系統視窗的寬高賦給頁面的寬高 success: function(res) { that.width = res.windowWidth that.height = res.windowHeight } }) }, //onReady生命週期函式,監聽頁面初次渲染完成 onReady: function(){ //呼叫canvasClock函式 this.canvasClock() //對canvasClock函式迴圈呼叫 this.interval = setInterval(this.canvasClock,1000) }, canvasClock: function(){ var context = wx.createContext()//建立並返回繪圖上下文(獲取畫筆) //設定寬高 var width = this.width var height = this.height var R = width/2-55;//設定文字距離時鐘中心點距離 //重置畫布函式 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(); } //呼叫 function drawClock(){ reSet(); circle(); num(); smallGrid(); bigGrid(); move(); } drawClock()//呼叫運動函式 // 呼叫 wx.drawCanvas,通過 canvasId 指定在哪張畫布上繪製,通過 actions 指定繪製行為 wx.drawCanvas({ canvasId:'myCanvas', actions: context.getActions() }) }, //頁面解除安裝,清除畫布繪製計時器 onUnload:function(){ clearInterval(this.interval) } })
index.wxml中存放著canvas標籤,並通過canvas-id和class指定了元件識別符號和樣式選擇器
<canvas canvas-id="myCanvas" class="canvas"></canvas>
index.wxss設定畫布樣式
.canvas{
width: 100%;
height: 100%;
position: fixed;
}
app.json檔案設定了頁面路徑和視窗表現
{ "pages": [ "pages/index" ], "window": { "navigationBarTextStyle": "light", "navigationBarTitleText": "畫布時鐘", "navigationBarBackgroundColor": "#000", "backgroundColor": "#fbf9fe" } }
這樣,整個微信小程式畫布時鐘就簡單的建立完成,看一下效果
guthub下載地址:https://github.com/RidingACodeToStray/weCanvasClock.git