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

首页 > 小程序资讯 > 小程序常见问题

时间：2020-07-15 10:36:31

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<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

三、Demo源码

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

微信小程序架构分析《三》：实现过程以及实时更新

微信小程序技术教程：集成 Redux