Demo效果图如下：

          

                

一、Demo思路来源

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

二、Demo实现

1.微信小程序开发环境搭建 ，如果这个地址无法下载，请使用官方地址下载；

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].length;j++){

      if (digit[num][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

三、Demo源码

源码已托管github，地址为：

代码笔记破解版