JS繪制微信小程序畫布時(shí)鐘

更新時(shí)間：2016年12月24日 10:36:26 作者：騎著袋馬去流浪

微信小程序官方組件也提供了畫布功能，下面分享一下如何創(chuàng)建微信小程序畫布時(shí)鐘

微信小程序官方組件也提供了畫布功能，下面分享一下如何創(chuàng)建微信小程序畫布時(shí)鐘。

總體思路是對(duì)pages中的一個(gè)小程序頁面構(gòu)建畫布時(shí)鐘邏輯程序，通過app.json公共設(shè)置來配置入口。

首先來看一下構(gòu)建這樣一個(gè)小程序所需要的目錄結(jié)構(gòu)

從目錄結(jié)構(gòu)就可以看出來這個(gè)程序是簡單的單層頁面，畫布渲染在pages下面的index頁面上。

其中對(duì)程序有實(shí)際驅(qū)動(dòng)作用的代碼分別在index.js，index.wxml，index.wxss和app.json這幾個(gè)文件中

Index.js文件里面存放著程序的邏輯層數(shù)據(jù)，是程序的核心。

1）考慮到適應(yīng)不同的手機(jī)大小，定義了兩個(gè)變量width和height，當(dāng)頁面加載時(shí)（onLoad）獲取系統(tǒng)窗口的值作為index頁面的大小；

2）頁面初次渲染后給index添加時(shí)鐘函數(shù)canvasClock（），并設(shè)置定時(shí)器，每一秒刷新一次畫布，呈現(xiàn)出時(shí)鐘運(yùn)動(dòng)的效果

3）在時(shí)鐘函數(shù)canvasClock（）中進(jìn)行繪制時(shí)鐘頁面所需的元素以其其運(yùn)動(dòng)函數(shù)，并對(duì)其進(jìn)行調(diào)用drawClock()，通過調(diào)用小程序wx.drawCanvas方法來指定index為繪制頁面和繪制行為

4）當(dāng)程序退出時(shí)，清除計(jì)時(shí)器

代碼如下：

// 獲取應(yīng)用實(shí)例 
Page({ 
 data:{ 
  width:0, 
  height:0 
 }, 
 //onLoad生命周期函數(shù)，監(jiān)聽頁面加載 
 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 
   } 
  }) 
 }, 
 //onReady生命周期函數(shù)，監(jiān)聽頁面初次渲染完成 
 onReady: function(){ 
  //調(diào)用canvasClock函數(shù) 
  this.canvasClock() 
  //對(duì)canvasClock函數(shù)循環(huán)調(diào)用 
  this.interval = setInterval(this.canvasClock,1000) 
 }, 
 canvasClock: function(){ 
  var context = wx.createContext()//創(chuàng)建并返回繪圖上下文（獲取畫筆） 
  //設(shè)置寬高 
  var width = this.width 
  var height = this.height 
  var R = width/2-55;//設(shè)置文字距離時(shí)鐘中心點(diǎn)距離 
  //重置畫布函數(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(); 
   } 
   } 
   //指針運(yùn)動(dòng)函數(shù) 
  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ào)用 
  function drawClock(){ 
   reSet(); 
   circle(); 
   num(); 
   smallGrid(); 
   bigGrid(); 
   move(); 
  } 
  drawClock()//調(diào)用運(yùn)動(dòng)函數(shù) 
  // 調(diào)用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪制，通過 actions 指定繪制行為 
  wx.drawCanvas({ 
   canvasId:'myCanvas', 
   actions: context.getActions() 
  }) 
 }, 
 //頁面卸載，清除畫布繪制計(jì)時(shí)器 
 onUnload:function(){ 
  clearInterval(this.interval) 
 } 
})

index.wxml中存放著canvas標(biāo)簽，并通過canvas-id和class指定了組件標(biāo)識(shí)符和樣式選擇器

<canvas canvas-id="myCanvas" class="canvas"></canvas>

index.wxss設(shè)置畫布樣式

.canvas{ 
 width: 100%; 
 height: 100%; 
 position: fixed; 
}

app.json文件設(shè)置了頁面路徑和窗口表現(xiàn)

{ 
 "pages": [ 
  "pages/index" 
 ], 
 "window": { 
 "navigationBarTextStyle": "light", 
 "navigationBarTitleText": "畫布時(shí)鐘", 
 "navigationBarBackgroundColor": "#000", 
 "backgroundColor": "#fbf9fe" 
 } 
}

這樣，整個(gè)微信小程序畫布時(shí)鐘就簡單的創(chuàng)建完成，看一下效果