微信小程序 使用canvas畫圓形倒計時

先來效果圖

wxml頁面

<view class="container">
     <view class='progress_box'>
        <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> 
        <canvas class="progress_canvas" canvas-id="secondCanvas"></canvas>
    </view>
</view>

wxss頁面

.progress_box{
  position: relative;
  width:84px;
  height: 84px;  
  display: flex;  
  align-items: center;
  justify-content: center;
  background-color: #03abfd;
  border-radius: 84px;
}
.progress_bg{
  position: absolute;
  width:84px;
  height: 84px; 
}
.progress_canvas{
  width:84px;
  height: 84px; 
} 

js頁面

// page/process/process.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      

  },

  drawProgressbg: function () {
    // 使用 wx.createContext 獲取繪圖上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    ctx.setLineWidth(15);// 設置圓環的寬度
    ctx.setStrokeStyle('#F18136'); // 設置圓環的顏色
    ctx.setLineCap('round') // 設置圓環端點的形狀
    ctx.beginPath();//開始一個新的路徑
    ctx.arc(42, 42, 30, 0, 2 * Math.PI, false);
    //設置一個原點(100,100)，半徑為90的圓的路徑到當前路徑
    ctx.stroke();//對當前路徑進行描邊
    ctx.draw();
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var step = 1,//計數動畫次數
      num = 0,//計數倒計時秒數（n - num）
      start = 1.5 * Math.PI,// 開始的弧度
      end = -0.5 * Math.PI,// 結束的弧度
      time = null;// 計時器容器

    var animation_interval = 1000,// 每1秒運行一次計時器
      n = 10; // 當前倒計時為10秒
    // 動畫函數
    function animation() {
      if (step <= n) {
        end = end + 2 * Math.PI / n;
        ringMove(start, end);
        step++;
      } else {
        clearInterval(time);
      }
    };
    // 畫布繪畫函數
    function ringMove(s, e) {
      var context = wx.createCanvasContext('secondCanvas')

      var gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1.0", "#5956CC");

      // 繪制圓環
      context.setStrokeStyle('#f6cbf4')
      context.beginPath()
      context.setLineWidth(10)
      context.arc(42, 42, 30, s, e, true)
      context.stroke()
      context.closePath()

      // 繪制倒計時文本
      context.beginPath()
      context.setLineWidth(1)
      context.setFontSize(30)
      context.setFillStyle('#ffffff')
      context.setTextAlign('center')
      context.setTextBaseline('middle')
      context.fillText(n - num + '', 42, 42, 30)
      context.fill()
      context.closePath()

      context.draw()

      // 每完成一次全程繪制就+1
      num++;
    }
    // 倒計時前先繪制整圓的圓環
    ringMove(start, end);
    // 創建倒計時
    time = setInterval(animation, animation_interval);
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.drawProgressbg(); 
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})