canvas 自定义百分比画圈

如果你需要下面这样的圆

和这样的圆

下面的代码可以你可以开箱即用（vue2.x）, 当然其它的需要技术栈需要你适当优化一下

html 复制代码

<canvas id="circle" height="148px" width="148px"></canvas>

js 复制代码

// 执行
this.circle(80,'#67C23A','#F2F6FC','#67C23A')

// 方法
circle(percentData,textColor,backgroundCircleColor,circleColor) {
  var canvas = document.getElementById('circle');
  var ctx = canvas.getContext("2d");
  let percent = percentData
  /*填充文字*/
  ctx.font = "bold 18px Microsoft YaHei";
  /*文字颜色*/
  ctx.fillStyle = textColor;
  /*文字内容*/
  var insertContent = '';
  // var text = ctx.measureText(insertContent);
  /*插入文字，后面两个参数为文字的位置*/
  /*此处注意：text.width获得文字的宽度，然后就能计算出文字居中需要的x值*/
  // ctx.fillText(insertContent, (132 - text.width) / 2, 68);
  /*填充百分比*/
  var ratioStr = percent + '%';
  var text = ctx.measureText(ratioStr);
  ctx.fillText(ratioStr, (148 - text.width) / 2, 83);
  /*开始圆环*/
  var circleObj = {
    ctx: ctx,
    /*圆心*/
    x: 74,
    y: 74,
    /*半径*/
    radius: 62,
    /*环的宽度*/
    lineWidth: 22
  }
  /*灰色的圆环*/
  /*开始的度数-从上一个结束的位置开始*/
  circleObj.startAngle = 0;
  /*结束的度数*/
  circleObj.endAngle = Math.PI * 2;
  circleObj.color = backgroundCircleColor;
  circleObj.lineWidth = 22;
  this.drawCircle(circleObj,2);
  /*有色的圆环*/
  /*从-90度的地方开始画*/
  circleObj.startAngle = - Math.PI * 2 * 90 / 360;
  /*从当前度数减去-90度*/
  circleObj.endAngle = Math.PI * 2 * (percent / 100 - 0.25);
  circleObj.color = circleColor;
  circleObj.lineWidth = 22; // 确保这里与灰色圆环的宽度一致
  if(percent !=0) {
    this.drawCircle(circleObj,1);
  }
},
/*画曲线*/
drawCircle(circleObj,type) {
  var ctx = circleObj.ctx;
  if(type==1){
    ctx.beginPath();
    // 绘制圆形路径，参数：x, y, 半径，起始角度，结束角度，顺时针/逆时针
    ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, false);
    //设定曲线粗细度
    ctx.lineWidth = circleObj.lineWidth;
    //给曲线着色
    ctx.strokeStyle = circleObj.color;
    //连接处样式,保证红色圆环有圆角效果
    ctx.lineCap = 'round'
    //给环着色
    ctx.stroke();
    ctx.closePath();
  }else if(type==2){
    // 开始一个新的路径
    ctx.beginPath();
    // 绘制圆形路径，参数：x, y, 半径，起始角度，结束角度，顺时针/逆时针
    ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle);
    ctx.lineWidth = circleObj.lineWidth;
    ctx.strokeStyle = circleObj.color
    ctx.stroke();
  }
}