Circle-Progress
$3
#### Circle-Progress是一款使用js编写的基于canvas的环形进度条插件,该插件简单小巧,高度可配置,不依赖任何第三方库。
##### 使用示例代码
html代码
``
`
js代码
`
var ring = new Ring({
canvasId:'canvas',
x:100,
y:100,
r:60,
strokeStyle:"rgb(255,84,6)",
color:"rgb(46,47,255)",
width:15,
percent:68.8,
animate:false,
text:"进度条"
});
``
#### 配置属性
|属性|默认值|含义|
|:-:|:-:|:-:|
|canvas|'canvas'|canvas id值|
|x|100|圆心x坐标|
|y|100|圆心y坐标|
|r|100|圆环半径|
|width|15|圆环宽度|
|percent|50|进度条百分比|
|direction|false|绘制方式是否是顺时针|
|strokeBgStyle|"#DDDDDD"|背景环的背景色|
|strokeStyle|"#01FF01"|百分环的背景色|
|text|""|环形中显示的文字内容|
|color|"#333"|环形文字中的颜色|
|fontSize|16|文字大小|
|animate|true|是否动画加载环形|