常州微信小程序开发canvas篇，实现全过程展示含demo

Demo效果图如下：

一、Demo思路来源

之所以写了这样一个Demo，是因为很久之前在常州网站开发建设看到了一个很好玩很酷炫利用canvas绘制的时钟，于是想着这样炫酷好玩的东西在常州微信小程序当中是否也能够得以实现呢？答案肯定是可以的。接下来我游戏开发运营－幻天网络将把这个Demo的思路一步一步分享给大家。

二、Demo实现

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

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 [常州App开发培训绘制对象]

*/

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

}