一起源码网 › 门户 › 初级进阶 › 查看主题

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

发布者: leeon | 发布时间: 2017-12-17 03:00| 查看数: 2131| 评论数: 1|帖子模式

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

54b686cd542139aa9d8e31d05b0ae77d.png (13.21 KB, 下载次数: 59)

下载附件

2017-12-17 03:00 上传

三、Demo源码

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

小程序canvas库

收藏0

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

最新评论

浏览过的版块

轻源码让程序更轻更快