版权声明：本文为qq_32654773原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32654773/article/details/107462158

一、circle.wxml

<!--components/circle/circle.wxml-->

<view class='container'>
  <view class='progress_box'>
    <!-- 绘制圆环背景 -->
    <canvas class="progress_bg" canvas-id="canvasProgressbg" />
    <!-- 绘制加载中圆弧 -->
    <canvas class="progress_canvas" canvas-id="canvasProgress" /> 
    <!-- 绘制圆弧中心提示文字 -->
    <view class="progress_text">
      <text class='progress_info'> {{progress_txt}}</text>
    </view>
  </view>
</view>

二、circle.wxss

/* components/circle/circle.wxss */

.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #34343d;
}
 
.progress_box {
  position: absolute;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}
 
.progress_bg {
  position: absolute;
  width: 220px;
  height: 220px;
}
 
.progress_canvas {
  width: 220px;
  height: 220px;
}
 
.progress_text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.progress_info {
  font-size: 35rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx;
  color: white;
}

三、circle.js

// components/circle/circle.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    //控制progress
    count: 0, // 设置 计数器 初始为0
    countTimer: null,// 设置 定时器
    progress_txt: '加载中...',// 提示文字
  },

  lifetimes: {
    ready: function() {
      // 绘制背景
      this.drawProgressbg();
      // 开始progress
      this.startProgress();
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
    * 画progress底部背景
    */
    drawProgressbg: function () {
      // 使用 wx.createContext 获取绘图上下文 context
      var ctx = wx.createCanvasContext('canvasProgressbg', this)
      // 设置圆环的宽度
      ctx.setLineWidth(7);
      // 设置圆环的颜色
      ctx.setStrokeStyle('#000000');
      // 设置圆环端点的形状
      ctx.setLineCap('round')
      //开始一个新的路径
      ctx.beginPath();
      //设置一个原点(110,110)，半径为100的圆的路径到当前路径
      ctx.arc(110, 110, 80, 0, 2 * Math.PI, false);
      //对当前路径进行描边
      ctx.stroke();
      //开始绘制
      ctx.draw();
    },
  
    /**
     * 画progress进度
     */
    drawCircle: function (step) {
      // 使用 wx.createContext 获取绘图上下文 context
      var context = wx.createCanvasContext('canvasProgress', this);
      // 设置圆环的宽度
      context.setLineWidth(7);
      // 设置圆环的颜色
      context.setStrokeStyle('#FBE6C7');
      // 设置圆环端点的形状
      context.setLineCap('round')
      //开始一个新的路径
      context.beginPath();
      //参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
      context.arc(110, 110, 80, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      //对当前路径进行描边
      context.stroke();
      //开始绘制
      context.draw()
    },
  
    /**
     * 开始progress
     */
    startProgress: function () {
      this.setData({
        count: 0
      });
      // 设置倒计时 定时器 每100毫秒执行一次，计数器count+1 ,耗时6秒绘一圈
      this.countTimer = setInterval(() => {
        if (this.data.count <= 60) {
          /* 绘制彩色圆环进度条  
          注意此处 传参 step 取值范围是0到2，
          所以 计数器 最大值 60 对应 2 做处理，计数器count=60的时候step=2
          */
          this.drawCircle(this.data.count / (60 / 2))
          this.data.count++;
        } else {
          clearInterval(this.countTimer);
          // this.startProgress();
        }
      }, 100)
    },
  }
})