无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

首頁 關(guān)于我們 小程序案例 小程序解決方案 小程序資訊 聯(lián)系我們
Menu
小程序資訊
小程序資訊
首頁 > 小程序資訊 > 小程序常見問題
微信小程序canvas篇，實現(xiàn)全過程展示含demo
時間：2020-07-15 10:36:31
Demo效果圖如下：
          

                

一、Demo思路來源

之所以寫了這樣一個Demo，是因為很久之前在慕課網(wǎng)看到了一個很好玩很酷炫利用canvas繪制的時鐘，于是想著這樣炫酷好玩的東西在小程序當中是否也能夠得以實現(xiàn)呢？答案肯定是可以的。接下來我將把這個Demo的思路一步一步分享給大家。

二、Demo實現(xiàn)

1.微信小程序開發(fā)環(huán)境搭建 http://www.helloxcx.com/jc/devtools/download.html，如果這個地址無法下載，請使用官方地址下載；

2.開發(fā)環(huán)境搭建后利用開發(fā)工具創(chuàng)建自己的Demo項目

  1）創(chuàng)建項目
                 

  2）添加核心代碼countdown.js ，digit.js到index目錄下
3.核心代碼實現(xiàn)(代碼中有詳細的開發(fā)注釋)

  1）digit.js（這里實現(xiàn)倒計時數(shù)字的排列，是一個3維數(shù)組）
// 數(shù)字排列
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（這里實現(xiàn)倒計時數(shù)字的繪圖以及倒計時）
var sort = require("./digit.js")
  , digit = sort.digit;   // 接收數(shù)字排列數(shù)組
var CANVAS_WIDTH = 375    // canvas寬度
  , CANVAS_HEIGHT = 500   // canvas高度
  , RADIUS = 8            // 小球半徑
  , MARGIN_TOP = 60       // 圖例距離右邊距離
  , MARGIN_LEFT = 60;     // 圖例距離左邊距離
/**
 * [render 數(shù)字渲染]
 * @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 [需要繪制出來的數(shù)字]
 * @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 [倒計時需要繪制的數(shù)字]
 * @param  {[type]} cxt  [繪制對象]
 */
function loopTime(time,cxt){
  render(time,cxt); 
  // 獲取當前context上存儲的繪圖動作
  wx.drawCanvas({
    canvasId:"canvas",
    actions:cxt.getActions()
  });
}
/**
 * [init 倒計時實現(xiàn)]
 * @param  {[type]} time [倒計時需要繪制的數(shù)字]
 * @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 
微信小程序架構(gòu)分析《三》：實現(xiàn)過程以及實時更新
微信小程序技術(shù)教程：集成 Redux
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358