Idea

2개의 캔버스를 사용합니다. 하나는 배경 링이고 다른 하나는 컬러 링입니다.
setInterval을 사용하여 색칠된 원을 단계별로 그립니다.

해결책

첫 번째 단계는 구조를 작성하는 것입니다.

상자는 2개의 캔버스와 텍스트 상자를 감쌉니다.
상자는 상대 위치 지정을 상위, 플렉스 레이아웃 및 중심으로 사용합니다. 배경, canvas-id="canvasProgressbg"
상대 위치 지정을 진행률 표시줄로 사용하는 또 다른 캔버스, canvas-id="canvasProgress"
코드는 다음과 같습니다.

// wxml
 <view class="container">
     <view class=&#39;progress_box&#39;>
        <canvas class="progress_bg"   canvas-id="canvasProgressbg">  </canvas> 
        <canvas class="progress_canvas"   canvas-id="canvasProgress">  </canvas> 
        <view class="progress_text">
            <view class="progress_dot"></view> 
            <text class=&#39;progress_info&#39;> {{progress_txt}}</text>
        </view>     
    </view>
</view>

로그인 후 복사

// wxss
.progress_box{
  position: relative;
  width:220px;
  height: 220px;  
// 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了
// 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备，下绘制的圆环跑盒子外去了
// 小程序使用rpx单位适配 ，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示
  display: flex;  
  align-items: center;
  justify-content: center;
  background-color: #eee;
}
.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: 36rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx
} 
.progress_dot{
  width:16rpx;
  height: 16rpx;  
  border-radius: 50%;
  background-color: #fb9126;
}

로그인 후 복사

데이터 바인딩의 두 번째 단계

가능한 대로 wxml에서 볼 수 있듯이 A 데이터 Progress_txt를 사용하므로 js에서 데이터를 다음과 같이 설정합니다.

 data: {
    progress_txt: '正在匹配中...',  
  },

로그인 후 복사

캔버스 그리기의 세 번째 단계

敲黑板，划重点

1 먼저 배경을 그립니다.

js에서 drawProgressbg 함수를 캡슐화합니다. 원을 그리면 캔버스가 원을 그립니다
onReady에서 이 함수를 실행하세요

애플릿의 캔버스 구성 요소는 H5의 캔버스와 약간 다릅니다. 문서를 확인하세요. 코드는 다음과 같습니다

drawProgressbg: function(){
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    ctx.setLineWidth(4);// 设置圆环的宽度
    ctx.setStrokeStyle('#20183b'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
    //设置一个原点(100,100)，半径为90的圆的路径到当前路径
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },
 onReady: function () {
    this.drawProgressbg(); 
  },

로그인 후 복사

다음과 같이 효과를 살펴보세요.

WeChat 애플릿은 순환 진행률 표시줄 예시 공유를 구현합니다.

2. 색상 그리기 Circle

은 js에서 원을 그리는 drawCircle 함수를 캡슐화하고,
는 onReady에서 이 함수를 실행합니다. 에

this.drawCircle(0.5) 효과는 다음과 같습니다. this drawCircle(1)의 효과는 다음과 같습니다. 3. 타이머 설정

this.drawCircle(2) 효과는 다음과 같습니다.

js의 데이터에 카운터 카운트, 단계 및 타이머 설정

타이머 함수 countInterval을 생성합니다. js에서는
onReady에서 이 함수를 실행합니다.

  drawCircle: function (step){  
    var context = wx.createCanvasContext('canvasProgress');
      // 设置渐变
      var gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1.0", "#5956CC");
      
      context.setLineWidth(10);
      context.setStrokeStyle(gradient);
      context.setLineCap('round')
      context.beginPath(); 
      // 参数step 为绘制的圆环周长，从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ，结束角 通过改变 step 的值确定
      context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke(); 
      context.draw() 
  },
 onReady: function () {
     this.drawProgressbg(); 
     this.drawCircle(2) 
  },

로그인 후 복사

최종 효과

관련 권장 사항: WeChat 애플릿은 순환 진행률 표시줄 예시 공유를 구현합니다.