# 一入前端深似海，从此红尘是路人系列第五弹之微信小程序canvas篇

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

// index.js
// 引用倒计时方法
var countdown = require("./countdown.js");
Page({
data: {},
var context = wx.createContext() // 通过小程序提供的接口创建并返回绘图上下文context对象
, loopTime = 60; // 设置倒计时的时间
// 启动倒计时
countdown.init(loopTime,context);
}
})

|
19天前
|

84 0
|
19天前
|

27 0
|
23天前
|
Dart 小程序 前端开发
WebSocket 解析与应用（包含web前端、服务端、小程序、dart/flutter中的用法）
WebSocket 解析与应用（包含web前端、服务端、小程序、dart/flutter中的用法）
111 0
|
29天前
|

C#医院预约挂号小程序源码（前端+后台）

26 0
|
1月前
|

26 0
|
1月前
|

Uni-app前端开发|基于微信小程序的快递运输管理系统
Uni-app前端开发|基于微信小程序的快递运输管理系统
26 0
|
1月前
|

23 0
|
2月前
|

java后台restTemplate生成二小程序维码，前端渲染
java后台restTemplate生成二小程序维码，前端渲染
17 0
|
2月前
|

Uni-app前端开发|基于微信小程序的快递运输管理系统
Uni-app前端开发|基于微信小程序的快递运输管理系统
50 1
|
2月前
|

65 0

• 云迁移中心

更多

更多

更多