用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

天下雪 2016-10-16 17:45

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

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][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 
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: qiangdada 来自: OS

相关阅读