小程序canvas绘制倒计时

如果本文对你有用，请爱心点个赞，提高排名，帮助更多的人。谢谢大家！❤

如果解决不了，可以在文末进群交流。

 

 效果展示：

 //广告倒计时
  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);
  },