微信小程序：圆形进度条1

Canvas就是用来绘制图形的强强强大的标签，用它来绘制各种图案是很简单的事情。

1.首先，我们需要在页面中加入canvas标签

<canvas canvas-id="circle"></canvas>

2.接下来，需要在js文件中绘制圆弧

page({
  data:{},
  onload:function(){
    this.drawcircle(0.82);
  },
  /**
   * 绘制圆形进度条,在使用的时候只需指定所要达到的百分比
   */
  drawcircle: function (percent){
    var rpx;
    //获取屏幕宽度，获取自适应单位
    wx.getSystemInfo({
      success: function (res) {
        rpx = res.windowWidth / 375;
      }
    });
    // 绘出进度
    var zero = -Math.PI * 1 / 2;//初始点为-2π
    var eAngle = 2 * Math.PI * percent + zero;//结束点为 初始点 + 2π * 比例，2π为360°
    const ctx = wx.createCanvasContext('circle');//获取绘图区域
    //ctx.drawImage('/images/icon/44.png', 0, 0, 260 * rpx, 227.5 * rpx);
    ctx.setLineWidth(6);//设置线宽
    ctx.setStrokeStyle('#7ee3c5');//设置线条颜色
    ctx.beginPath();//开始一个新的路径 
    ctx.arc(122 * rpx, 118.5 * rpx, 70 * rpx, zero, eAngle, false);//画一段圆弧
    ctx.stroke();//对当前路径进行描边 
    ctx.draw();
  },
})

效果如下图所示

image.png