微信小程序圆环进度条

先来看一下效果图

微信小程序里面用canvas画圆心进度条

页面给容器

js:

data: {
    yuan:{height:110}
  },
onLoad: function (options) {
    var windowidth = 700;
    var colw=windowidth / 3;
    this.setData({
      yuan:{
        height:colw
      }
    })
    this.createCanvas('one',colw /2,'red','第一','80',100);
    this.createCanvas('two', colw / 2, 'red', '第一', '50',100);
  },

  createCanvas:function(id,xy,color,txt,val,total){
    var ctx=wx.createCanvasContext(id);
    ctx.setLineWidth(8);
    ctx.setStrokeStyle('#ffffff');
    ctx.setLineCap('round');
    ctx.beginPath();
    ctx.arc(xy,xy,0.75*xy,0,2*Math.PI,false);
    ctx.stroke();

    ctx.setLineWidth(8);
    ctx.setStrokeStyle(color);
    ctx.setLineCap('round');
    var p=val / total;

    ctx.beginPath(xy);
    ctx.arc(xy,xy,0.75*xy,-90 * Math.PI / 180,(p*360 - 90)*Math.PI / 180,false);
    ctx.textAlign = "center";
    ctx.font = '14rpx Arial';
    ctx.fillText(txt, xy, 1.4 * xy, xy);
    ctx.font = '28rpx Arial';
    ctx.fillStyle = color;
    ctx.fillText(val, xy, 1.1 * xy, xy);
    ctx.stroke();//对当前路径进行描边
    ctx.draw();



  },

css

.weui{
  height: 300px;
  position: relative;

}
.oneCan{
  height: 300px;
  width: 100%;
  display: block !important;
}