介绍

circle-progress-bar.js 是一款利用canvas绘制圆环进度条的插件，不依赖任何库。
效果如图：

用法

$3

git clone 此仓库，然后在html中引用 lib文件夹中的circle-progress-bar.js即可。

$3

``





`

$3

`
{
canvasDom: CanvasDomNeedToSet, // 必填的canvas dom
// 以下的数值为默认参数值
r: 30, // 内圆半径
lineWidth: 5, // border宽度
lineColor: '#3385ff', // border进度条颜色
lineBgColor: '#eeeeee', // border背景颜色
angle: Math.PI * 0.5, // 需要转动的角度
startAngle: -Math.PI * 0.5, // 起始角度
duration: 1000, // 过渡时间, 单位:ms
text: '', // 圆圈中的文字
showPercent: true, // 是否显示百分比数值
textFontSize: 12, // 文字大小 (px)
textColor: '#3385ff', // 文字颜色
animationMode: 'linear' // 'linear' || 'accelerate' || 'decelerate' 匀速，加速， 减速
}
`

兼容性

!Chrome | !Firefox | !Safari | !Opera | !Edge | !IE
--- | --- | --- | --- | --- | ---
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 10+ ✔

$3

* 此插件运行方向均为顺时针，暂时不支持逆时针；

* 强烈不建议设置lineWitdh值为奇数！因为奇数线条宽度会在canvas中发虚（原因是剩余的0.5px宽度的线条颜色会变淡）

* 当showPercent为true时，同时又存在text: '示例文字' ，则'示例文字'不会出现，只会出现百分比文字；

* 如何解决canvas失真的问题？
失真问题是canvas本身就会存在的问题，利用css缩小canvas的宽高即可；
如：设置参数：r: 50, lineWidth: 10, 则此时canvas的width会是 502+10\2 === 120, 此时css设置 #my-canvas {width: 60px;} 便缩小至了60px。

* 可以设置多行文字吗？
不行，只能设置单行文字。

* 如何解决文字换行的问题？
此插件不支持文字换行，文字过多时会造成canvas的显示不正常。
解决方案： 设置参数showPercent: false`, 然后用户自己编写文字元素并利用定位调整到圆环中心显示。