版權(quán)聲明：本文為qq_32654773原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接和本聲明。
本文鏈接：https://blog.csdn.net/qq_32654773/article/details/107462158

一、circle.wxml

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

<view class='container'>
  <view class='progress_box'>
    <!-- 繪制圓環(huán)背景 -->
    <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: {

  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    //控制progress
    count: 0, // 設(shè)置 計數(shù)器 初始為0
    countTimer: null,// 設(shè)置 定時器
    progress_txt: '加載中...',// 提示文字
  },

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

  /**
   * 組件的方法列表
   */
  methods: {
    /**
    * 畫progress底部背景
    */
    drawProgressbg: function () {
      // 使用 wx.createContext 獲取繪圖上下文 context
      var ctx = wx.createCanvasContext('canvasProgressbg', this)
      // 設(shè)置圓環(huán)的寬度
      ctx.setLineWidth(7);
      // 設(shè)置圓環(huán)的顏色
      ctx.setStrokeStyle('#000000');
      // 設(shè)置圓環(huán)端點的形狀
      ctx.setLineCap('round')
      //開始一個新的路徑
      ctx.beginPath();
      //設(shè)置一個原點(110,110)，半徑為100的圓的路徑到當(dāng)前路徑
      ctx.arc(110, 110, 80, 0, 2 * Math.PI, false);
      //對當(dāng)前路徑進行描邊
      ctx.stroke();
      //開始繪制
      ctx.draw();
    },
  
    /**
     * 畫progress進度
     */
    drawCircle: function (step) {
      // 使用 wx.createContext 獲取繪圖上下文 context
      var context = wx.createCanvasContext('canvasProgress', this);
      // 設(shè)置圓環(huán)的寬度
      context.setLineWidth(7);
      // 設(shè)置圓環(huán)的顏色
      context.setStrokeStyle('#FBE6C7');
      // 設(shè)置圓環(huán)端點的形狀
      context.setLineCap('round')
      //開始一個新的路徑
      context.beginPath();
      //參數(shù)step 為繪制的圓環(huán)周長，從0到2為一周 。 -Math.PI / 2 將起始角設(shè)在12點鐘位置 ，結(jié)束角 通過改變 step 的值確定
      context.arc(110, 110, 80, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      //對當(dāng)前路徑進行描邊
      context.stroke();
      //開始繪制
      context.draw()
    },
  
    /**
     * 開始progress
     */
    startProgress: function () {
      this.setData({
        count: 0
      });
      // 設(shè)置倒計時 定時器 每100毫秒執(zhí)行一次，計數(shù)器count+1 ,耗時6秒繪一圈
      this.countTimer = setInterval(() => {
        if (this.data.count <= 60) {
          /* 繪制彩色圓環(huán)進度條  
          注意此處 傳參 step 取值范圍是0到2，
          所以 計數(shù)器 最大值 60 對應(yīng) 2 做處理，計數(shù)器count=60的時候step=2
          */
          this.drawCircle(this.data.count / (60 / 2))
          this.data.count++;
        } else {
          clearInterval(this.countTimer);
          // this.startProgress();
        }
      }, 100)
    },
  }
})