一入前端深似海，今後紅塵是路人系列第五彈之微信小程序canvas篇

看着小程序這些日子這麼火爆，對於新鮮事物炒雞感興趣的我確定也小小的研究了一下。因而乎便搞出了一個小程序版本的倒計時Demo。Demo效果圖以下：
          

                

1、Demo思路來源

之因此寫了這樣一個Demo，是由於好久以前在慕課網看到了一個很好玩很酷炫利用canvas繪製的時鐘，因而想着這樣炫酷好玩的東西在小程序當中是否也可以得以實現呢？答案確定是能夠的。接下來我將把這個Demo的思路一步一步分享給你們。

2、Demo實現

1.微信小程序開發環境搭建 http://www.helloxcx.com/jc/devtools/download.html

2.開發環境搭建後利用開發工具建立本身的Demo項目

  1）建立項目

         

                                   

  2）添加核心代碼countdown.js ，digit.js到index目錄下
3.核心代碼實現(代碼中有詳細的開發註釋)

  1）digit.js（這裏實現倒計時數字的排列，是一個3維數組）

// 數字排列
var digit = [
  [
    [0,0,1,1,1,0,0],
    [0,1,1,0,1,1,0],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [0,1,1,0,1,1,0],
    [0,0,1,1,1,0,0]
  ],//0
  [
    [0,0,0,1,1,0,0],
    [0,1,1,1,1,0,0],
    [0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0],
    [1,1,1,1,1,1,1]
  ],//1
  [
    [0,1,1,1,1,1,0],
    [1,1,0,0,0,1,1],
    [0,0,0,0,0,1,1],
    [0,0,0,0,1,1,0],
    [0,0,0,1,1,0,0],
    [0,0,1,1,0,0,0],
    [0,1,1,0,0,0,0],
    [1,1,0,0,0,0,0],
    [1,1,0,0,0,1,1],
    [1,1,1,1,1,1,1]
  ],//2
  [
    [1,1,1,1,1,1,1],
    [0,0,0,0,0,1,1],
    [0,0,0,0,1,1,0],
    [0,0,0,1,1,0,0],
    [0,0,1,1,1,0,0],
    [0,0,0,0,1,1,0],
    [0,0,0,0,0,1,1],
    [0,0,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [0,1,1,1,1,1,0]
  ],//3
  [
    [0,0,0,0,1,1,0],
    [0,0,0,1,1,1,0],
    [0,0,1,1,1,1,0],
    [0,1,1,0,1,1,0],
    [1,1,0,0,1,1,0],
    [1,1,1,1,1,1,1],
    [0,0,0,0,1,1,0],
    [0,0,0,0,1,1,0],
    [0,0,0,0,1,1,0],
    [0,0,0,1,1,1,1]
  ],//4
  [
    [1,1,1,1,1,1,1],
    [1,1,0,0,0,0,0],
    [1,1,0,0,0,0,0],
    [1,1,1,1,1,1,0],
    [0,0,0,0,0,1,1],
    [0,0,0,0,0,1,1],
    [0,0,0,0,0,1,1],
    [0,0,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [0,1,1,1,1,1,0]
  ],//5
  [
    [0,0,0,0,1,1,0],
    [0,0,1,1,0,0,0],
    [0,1,1,0,0,0,0],
    [1,1,0,0,0,0,0],
    [1,1,0,1,1,1,0],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [0,1,1,1,1,1,0]
  ],//6
  [
    [1,1,1,1,1,1,1],
    [1,1,0,0,0,1,1],
    [0,0,0,0,1,1,0],
    [0,0,0,0,1,1,0],
    [0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0],
    [0,0,1,1,0,0,0],
    [0,0,1,1,0,0,0],
    [0,0,1,1,0,0,0],
    [0,0,1,1,0,0,0]
  ],//7
  [
    [0,1,1,1,1,1,0],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [0,1,1,1,1,1,0],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [0,1,1,1,1,1,0]
  ],//8
  [
    [0,1,1,1,1,1,0],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [1,1,0,0,0,1,1],
    [0,1,1,1,0,1,1],
    [0,0,0,0,0,1,1],
    [0,0,0,0,0,1,1],
    [0,0,0,0,1,1,0],
    [0,0,0,1,1,0,0],
    [0,1,1,0,0,0,0]
  ]//9
];
module.exports = {
    digit : digit
}

  2）countdown.js（這裏實現倒計時數字的繪圖以及倒計時）

var sort = require("./digit.js")
  , digit = sort.digit;   // 接收數字排列數組
var CANVAS_WIDTH = 375    // canvas寬度
  , CANVAS_HEIGHT = 500   // canvas高度
  , RADIUS = 8            // 小球半徑
  , MARGIN_TOP = 60       // 圖例距離右邊距離
  , MARGIN_LEFT = 60;     // 圖例距離左邊距離
/**
 * [render 數字渲染]
 * @param  {[type]} time [倒計時時間]
 * @param  {[type]} cxt  [繪製對象]
 */
function render(time,cxt){
  cxt.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
  renderDigit(MARGIN_LEFT , MARGIN_TOP , parseInt(time/10) , cxt );
  renderDigit(MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(time%10) , cxt );
}
/**
 * [renderDigit 單獨小球的繪製]
 * @param  {[type]} x   [每一個小球x軸距離]
 * @param  {[type]} y   [每一個小球y軸距離]
 * @param  {[type]} num [須要繪製出來的數字]
 * @param  {[type]} cxt [繪製對象]
 */
function renderDigit(x,y,num,cxt){
  for(var i=0;i<digit[num].length;i++){
    for(var j=0;j<digit[num][i].length;j++){
      if (digit[num][i][j]){
        cxt.beginPath();
        cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1) , y+i*2*(RADIUS+1)+(RADIUS+1) , RADIUS , 0 ,2*Math.PI);
        cxt.closePath();
        cxt.fill();
      }
    } 
  }
}
/**
 * [loopTime 倒計時繪圖]
 * @param  {[type]} time [倒計時須要繪製的數字]
 * @param  {[type]} cxt  [繪製對象]
 */
function loopTime(time,cxt){
  render(time,cxt); 
  // 獲取當前context上存儲的繪圖動做
  wx.drawCanvas({
    canvasId:"canvas",
    actions:cxt.getActions()
  });
}
/**
 * [init 倒計時實現]
 * @param  {[type]} time [倒計時須要繪製的數字]
 * @param  {[type]} cxt  [繪製對象]
 */
function init(time,cxt){
  loopTime(time,cxt)
  var loop = setInterval(function(){
    time--;
    (time < 1 ) && (
      clearInterval(loop)
    )
    loopTime(time,cxt)
  },1000);
}
// 將init方法暴露出去
module.exports = {
  render:render,
  init:init
}

  3）index.js

// index.js
// 引用倒計時方法
var countdown = require("./countdown.js"); 
Page({
  data: {},
  onReady:function(e){
    var context = wx.createContext() // 經過小程序提供的接口建立並返回繪圖上下文context對象
      , loopTime = 60; // 設置倒計時的時間
    // 啓動倒計時
    countdown.init(loopTime,context); 
  }
})

3、Demo源碼

源碼已託管github，地址爲：https://github.com/xuqiang521/Wechat  （求star，求watch）

好了，若是你搭建好了小程序開發環境，下載好了源碼，那麼趕忙去嘗試一下小程序帶來的快感吧！若是喜歡記得給贊哦😏！

鄙人公衆號：qiangdada   我會在公衆號不按期推送一些有關前端以及小程序的知識點！

 

 

 

 

 

最後，如若哪裏有問題，還請輕噴，可是歡迎指出你們一塊兒交流(*^__^*) ！