效果展示：

 //廣告倒計時
  advTimeCountDown:function(advTime){
    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 = advTime; // 當前倒計時為30秒
    // 動畫函式
    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('advTimeCanvas')

      // 繪製圓環
      context.setStrokeStyle('#fff') //設定線條樣式
      context.beginPath() //重新開始新路徑，而把之前的路徑都清空掉
      context.setLineWidth(3)  //繪製線條寬度
      context.arc(13, 13, 10, s, e, true) //畫圓 1圓的中心的 x 座標。2圓的中心的 y 座標。3圓的半徑。4起始角，以弧度計（弧的圓形的三點鐘位置是 0 度）。5結束角，以弧度計。6規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。
      context.stroke()  //繪製一條路徑
      context.closePath()

      // 繪製倒計時文字
      context.beginPath()
      context.setLineWidth(1) //繪製線條寬度
      context.setFontSize(10) //設定字號
      context.setFillStyle('#fff')
      context.setTextAlign('center')
      context.setTextBaseline('middle')
      context.fillText(n - num + '', 13, 13, 100) //1規定在畫布上輸出的文字。2開始繪製文字的 x 座標位置（相對於畫布）。3開始繪製文字的 y 座標位置（相對於畫布）。4可選。允許的最大文字寬度，以畫素計。
      context.fill()
      context.closePath()

      context.draw()

      // 每完成一次全程繪製就+1
      num++;
    };

    // 倒計時前先繪製整圓的圓環
    ringMove(start, end);
    time = setInterval(animation, animation_interval);
  },