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|是否动画加载环形|