一入前端深似海，从此红尘是路人系列第五弹之微信小程序canvas篇

看着小程序这些日子这么火爆，对于新鲜事物炒鸡感兴趣的我肯定也小小的研究了一下。于是乎便搞出了一个小程序版本的倒计时Demo。Demo效果图如下：
          

一、Demo思路来源

之所以写了这样一个Demo，是因为很久之前在慕课网看到了一个很好玩很酷炫利用canvas绘制的时钟，于是想着这样炫酷好玩的东西在小程序当中是否也能够得以实现呢？答案肯定是可以的。接下来我将把这个Demo的思路一步一步分享给大家。

二、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
}

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
}

// index.js
// 引用倒计时方法
var countdown = require("./countdown.js"); 
Page({
  data: {},
  onReady:function(e){
    var context = wx.createContext() // 通过小程序提供的接口创建并返回绘图上下文context对象
      , loopTime = 60; // 设置倒计时的时间
    // 启动倒计时
    countdown.init(loopTime,context); 
  }
})

三、Demo源码

源码已托管github，地址为：https://github.com/xuqiang521/Wechat  （求star，求watch）

好了，如果你搭建好了小程序开发环境，下载好了源码，那么赶紧去尝试一下小程序带来的快感吧！如果喜欢记得给赞哦！

原文发布时间为：2016年10月08日
原文作者：qiangdada 

本文来源：开源中国 如需转载请联系原作者