小程序 canvas制作圆环倒计时

原文链接：https://blog.csdn.net/xjf18250534957/article/details/80094233
参考：https://www.jianshu.com/p/4ba43973903e

WXML代码：

<view class='main' style="background-color: #ccc;">
  <canvas style="width: 200px; height: 200px;" 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.setLineWidth(16) //线条的宽度
      context.arc(100, 100, 90, 0, 2 * Math.PI) //x轴坐标50，y轴坐标50，半径42，Math.PI=180°
      context.setStrokeStyle('white') //描边的颜色
      context.stroke() //当前路径的边框
      
      // 绘制内圆环
      context.beginPath() //开始创建一个路径
      context.setLineCap('round') //设置线条端点样式
      context.setLineWidth(8)
      context.arc(100, 100, 90, s, e, true)
      context.setStrokeStyle('#6699ff')
      context.stroke()
   
      // 绘制倒计时文本
      context.beginPath()
      context.setLineWidth(1)
      context.setFontSize(60)
      context.setFillStyle('#333333')
      context.setTextAlign('center')
      context.setTextBaseline('middle')
      context.fillText(n - num + '', 100, 100, 100)
      context.fill()
      context.closePath()

      context.draw()

      // 每完成一次全程绘制就+1
      num++;
    }
    // 倒计时前先绘制整圆的圆环
    ringMove(start, end);
    // 创建倒计时m.h987yuitryuioihyhujik[jhgvfbnvnjmnbvbnm,nbvfcgklkjhg545545545u ]
    time = setInterval(animation, animation_interval);
  },