С³ÌÐò»æÖÆ»·ÐÎͼ

Ч¹ûͼ：

wxml：

<view class='progress_box' wx:for="{{canvasProgressbg}}" wx:key="*this" wx:for-index="listIndex" wx:for-item="item">
                  <canvas class="progress_bg" canvas-id="{{item.bgid}}"> </canvas>
                  <canvas class="progress_canvas" canvas-id="{{item.pgid}}"> </canvas>
                  <view class="progress_text">
                    <text class='progress_info'> {{item.grade}}%</text>
                  </view>
                </view>

js：

Page({
  data: {
    canvasProgressbg: [{
      bgid: "canvasProgressbg1",
      pgid: "canvasProgress1",
      test_name: "ÔÚÏßÂÊ",
      grade: "80"
    }]
  },
  drawProgressbg() {
    let w = wx.getSystemInfoSync().screenWidth;
    let that = this;
    for (let i = 0; i < that.data.canvasProgressbg.length; i++) {
      let ctx = wx.createCanvasContext(that.data.canvasProgressbg[i].bgid)
      ctx.setLineWidth(8*w/375);
      ctx.setStrokeStyle('#DDEDFA');
      ctx.setLineCap('round');
      ctx.beginPath();
      ctx.arc(51*w/375, 51*w/375, 43*w/375, 0, 2 * Math.PI, false);
      ctx.stroke();
      ctx.draw();
    }
  },
  drawCircle () {
    let w = wx.getSystemInfoSync().screenWidth;
    let that = this;
    for (let i = 0; i < that.data.canvasProgressbg.length; i++) {
      let context = wx.createCanvasContext(that.data.canvasProgressbg[i].pgid);
      context.setLineWidth(8*w/375);
      context.setStrokeStyle('#55A5E6');
      context.setLineCap('round');
      context.beginPath();
      context.arc(51*w/375, 51*w/375, 43*w/375, -Math.PI / 2, that.data.canvasProgressbg[i].grade/50 * Math.PI - Math.PI / 2, false);
      context.stroke();
      context.draw()
    }
  },
  onLoad: function () {
    this.drawProgressbg();
    this.drawCircle()
  }
})

wxss：

.progress_box{
  width: 206rpx;
  height: 206rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress_bg {
  position: absolute;
  width: 206rpx;
  height: 206rpx;
  z-index: 9;
}
.progress_canvas {
  width: 206rpx;
  height: 206rpx;
  z-index: 9;
}
.progress_text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress_info {
  letter-spacing: 2rpx;
  color: #55A5E6;
  font-weight: 600;
  font-size: 38rpx;
}