微信小程序canvas篇，实现全过程展示含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

}

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

for(var j=0;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

三、Demo源码

源码已代销github，地址为：https://github.com/xuqiang521/Wechat