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();
  }
}
相关推荐
aklry9 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9316 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子17 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982417 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug19 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo19 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan20 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢43 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
Struggler2811 小时前
解决setTimeout/setInterval计时不准确问题的方案
前端