小程序——運用canvas製作圓環倒計時

WXML代碼：

<view class='main' style="background-color: #ccc;">
  <canvas style="width: 300px; height: 300px;" canvas-id="secondCanvas"></canvas>
</view>

JS代碼：

/**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    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')

      // 繪製圓環
      context.setStrokeStyle('#333333')
      context.beginPath()
      context.setLineWidth(30)
      context.arc(150, 150, 120, s, e, true)
      context.stroke()
      context.closePath()
      
      // 繪製倒計時文本
      context.beginPath()
      context.setLineWidth(1)
      context.setFontSize(60)
      context.setFillStyle('#333333')
      context.setTextAlign('center')
      context.setTextBaseline('middle')
      context.fillText(n - num + '', 150, 150, 100)
      context.fill()
      context.closePath()

      context.draw()

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