前不久在社区里发布了第一个版本的环形进度条小工具https://developers.weixin.qq.com/community/develop/article/doc/000e4e66d4c210ae234a10a855ac13

本次针对上一个版本遗留的问题进行修复，还增加增加了全新功能

1、修复圆环半径计算精度的问题

梳理了工具中所有计算单位，严格按照小程序规则进行转换

2、draw增加兜底逻辑，有效值控制在0%-100%

在调用draw方法时，有可能会传入不合法参数，或者参数不在常规有效范围内，工具则会自动转换，比如传入了-10，那对应生效的值是0，如果传入了110，对应生效的值是100

3、进度点的阴影可以自行控制

// 如果dotstyle数据项中包含shadow，则会在这个进度点生成对应颜色的阴影效果
dotStyle: [{r: 24, fillStyle: '#fff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]

4、【重要新功能】增加按百分比显示圆环的功能，有效值控制在50%-100%

在社区当中存在比较多的开发着有按比例显示进度条总弧度的需求，比如

本期针对这类需求，新增参数percent，当在初始化是传入参数percent（有效值是50～100，意思是可以显示半弧至完整闭环弧）

const mprogress = new MpProgress({
  canvasId: 'progress',
  canvasSize: {
    width: 400,
    height: 400
  },
  percent: 80,
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
});
mprogress.draw(25);

如代码所示，显示圆环的总弧度为360*80%=288，同时工具会根据当前是否需要显示进度点或者进度点是否有shadow的情况自动生产最大的能填满canvas的弧度，以上代码显示效果如下：

希望能帮助到你～

喜欢的给个start吧，感谢

https://github.com/lucaszhu2zgf/mp-progress

快速安装：npm install mp-progress --save