一、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
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
