1.0.0 • Published 7 years ago
ring-progress v1.0.0
Circle-Progress
theapin
Circle-Progress是一款使用js编写的基于canvas的环形进度条插件,该插件简单小巧,高度可配置,不依赖任何第三方库。
使用示例代码
html代码
<canvas id="canvas" width="600px" height="600px"></canvas>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 | 是否动画加载环形 |
1.0.0
7 years ago