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

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

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

                145242_gsqy_2912341.png

一、Demo思路来源

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

二、Demo实现

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

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

  1)创建项目

         145820_X5kJ_2912341.png

                                   145941_M08F_2912341.png

  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)

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


原文发布时间为:2016年10月08日
原文作者:qiangdada 

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
19天前
|
小程序 前端开发 JavaScript
微信小程序开发前端基础知识一
微信小程序开发前端基础知识一
|
19天前
|
前端开发 小程序
微信小程序开发前端基础知识二
微信小程序开发前端基础知识二
|
23天前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
111 0
|
29天前
|
监控 小程序 前端开发
C#医院预约挂号小程序源码(前端+后台)
线上预约挂号系统构建了医院和患者的连接,通过改善患者院内的就医服务流程,以微信公众号、支付宝小程序为患者服务入口,为居民提供导诊、预约、支付、报告查询等线上线下一体化的就医服务,缩短患者就诊环节,提高医疗机构服务效率。
26 0
|
1月前
|
小程序 前端开发 JavaScript
前端Uni-app开发微信小程序|微信小程序手机商城
前端Uni-app开发微信小程序|微信小程序手机商城
|
1月前
|
存储 小程序 前端开发
Uni-app前端开发|基于微信小程序的快递运输管理系统
Uni-app前端开发|基于微信小程序的快递运输管理系统
|
1月前
|
前端开发 JavaScript 小程序
亚马逊云科技 Build On -Serverless低代码平台初体验-快速完成vue前端订单小程序
亚马逊云科技 Build On -Serverless低代码平台初体验-快速完成vue前端订单小程序
23 0
|
2月前
|
小程序 前端开发 JavaScript
java后台restTemplate生成二小程序维码,前端渲染
java后台restTemplate生成二小程序维码,前端渲染
|
2月前
|
存储 小程序 前端开发
Uni-app前端开发|基于微信小程序的快递运输管理系统
Uni-app前端开发|基于微信小程序的快递运输管理系统
|
2月前
|
前端开发 小程序 API
钉钉小程序的后端想要直接获取用户token,只能是前端通过dd.getAuthCode这种方式拿authCode吗?
钉钉小程序的后端想要直接获取用户token,只能是前端通过dd.getAuthCode这种方式拿authCode吗?
65 0

热门文章

最新文章

相关产品

  • 云迁移中心