WeChat 애플릿에서 원형 진행 표시줄을 만드는 방법

// 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;
}

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

 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) 
 },