微信小程序：静态圆形进度条实现

最新推荐文章于 2025-04-23 11:38:43 发布

JesseAndroid

最新推荐文章于 2025-04-23 11:38:43 发布

阅读量2k

点赞数

分类专栏：微信小程序开发文章标签： wxSmallApp wxml wxss circleProgress roundProgress

本文链接：https://blog.youkuaiyun.com/yonghuming_jesse/article/details/83304036

版权

微信小程序开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在微信小程序中使用canvas绘制环形进度条的方法，包括如何设定圆心坐标、半径、背景色、进度颜色及百分比显示等参数，并提供了完整的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

实现：

function drawCircleProgress(canvasId, backStrokeColor,strokeColor,x,y,radius,percent,text,fontSize,fontColor){
  // console.log("canvasId : " + canvasId + " ; backStrokeColor : " + backStrokeColor + " ; strokeColor : " + strokeColor+
  //   " ; width : " + width + " ; height : " + height + " ; leftMargin : " + leftMargin + " ; topMargin : " + topMargin+
  //   " ; percent : " + percent + " ; text : " + text + " ; fontSize : " + fontSize + " ; fontColor : " + fontColor);

  // var radius = (Math.min(width, height) / 3.5)-6;
  // var x = (width+leftMargin)/2.5;
  // var y = (height+topMargin)/2.5;

  // var cxt_arc = wx.createCanvasContext(canvasId);//创建并返回绘图上下文context对象。
  // cxt_arc.setLineWidth(6);
  // cxt_arc.setStrokeStyle(backStrokeColor);
  // cxt_arc.setLineCap('round')
  // cxt_arc.beginPath();//开始一个新的路径
  // cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径
  // cxt_arc.stroke();//对当前路径进行描边

  // cxt_arc.setLineWidth(6);
  // cxt_arc.setStrokeStyle(strokeColor);
  // cxt_arc.setLineCap('round')
  // cxt_arc.beginPath();//开始一个新的路径
  // cxt_arc.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI * (percent / 100), false);
  // cxt_arc.stroke();//对当前路径进行描边

  // var finalSize = fontSize/2;
  // cxt_arc.beginPath();
  // cxt_arc.setFontSize(finalSize);
  // cxt_arc.setFillStyle(fontColor);
  // cxt_arc.fillText(text, x-(finalSize+2), y+5);

  // cxt_arc.draw();

  var cxt_arc = wx.createCanvasContext(canvasId);//创建并返回绘图上下文context对象。
  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle(backStrokeColor);
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//开始一个新的路径
  cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径
  cxt_arc.stroke();//对当前路径进行描边

  cxt_arc.setLineWidth(6);
  cxt_arc.setStrokeStyle(strokeColor);
  cxt_arc.setLineCap('round')
  cxt_arc.beginPath();//开始一个新的路径
  cxt_arc.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI * (percent / 100), false);
  cxt_arc.stroke();//对当前路径进行描边

  var finalSize = fontSize / 2;
  cxt_arc.beginPath();
  cxt_arc.setFontSize(finalSize);
  cxt_arc.setFillStyle(fontColor);
  cxt_arc.fillText(text, x - (finalSize + 2), y + 5);

  cxt_arc.draw();
}