看着 小程序 这些日子这么火爆,对于新鲜事物炒鸡感兴趣的我肯定也小小的研究了一下。于是乎便搞出了一个小程序版本的倒计时Demo。Demo效果图如下:


一入前端深似海,从此红尘是路人系列第五弹之微信小程序canvas篇 - qiangdada的个人空 ...
一、Demo思路来源

之所以写了这样一个Demo,是因为很久之前在慕课网看到了一个很好玩很酷炫利用canvas绘制的时钟,于是想着这样炫酷好玩的东西在小程序当中是否也能够得以实现呢?答案肯定是可以的。接下来我将把这个Demo的思路一步一步分享给大家。

二、Demo实现

1.微信小程序开发环境搭建http://www.helloxcx.com/jc/devtools/download.html

2.开发环境搭建后利用开发工具创建自己的Demo项目

1)创建项目


一入前端深似海,从此红尘是路人系列第五弹之微信小程序canvas篇 - qiangdada的个人空 ...
一入前端深似海,从此红尘是路人系列第五弹之微信小程序canvas篇 - qiangdada的个人空 ...

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

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

源码已托管github,地址为:https://github.com/xuqiang521/Wechat (求star,求watch)

好了,如果你搭建好了小程序开发环境,下载好了源码,那么赶紧去尝试一下小程序带来的快感吧!如果喜欢记得给赞哦:smirk:!

鄙人公众号:qiangdada 我会在公众号不定期推送一些有关前端以及小程序的知识点!


一入前端深似海,从此红尘是路人系列第五弹之微信小程序canvas篇 - qiangdada的个人空 ...

最后,如若哪里有问题,还请轻喷,但是欢迎指出大家一起交流(*^__^*) !

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 微信
分页:12
转载请注明
本文标题:一入前端深似海,从此红尘是路人系列第五弹之微信小程序canvas篇 - qiangdada的个人空 ...
本站链接:http://www.codesec.net/view/481185.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(71)