简介

圆形绘制插件CircleProgress

使用

1.  引入  jquery  和  circle-progress.js 文件

2.  HTML

<div id="circle_step1"></div>

3.  调用

$('#circle_step'+num).circleProgress({
		    value: 0.98,//你需要展示的值，值从0.0到1.0，默认值为0
		    size: 155,//环形图的大小，单位像素，默认值100
		    startAngle:-1.57,//初始角度，默认值为-Math.PI
		    reverse:false,//是否反向绘制圆弧和动画，默认值为false
		    lineCap:'round',//圆弧的线头样式："butt"、"round"和"square"。默认值为"butt"
		    thickness:20,//进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。
		    emptyFill:'rgba(0, 0, 0, .1)',//空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
		    fill: {
		    	//圆弧填充的配置。
//				-{ color: "#ff1e41" }
//				-{ color: 'rgba(255, 255, 255, .3)' }
//				-{ gradient: ["red", "green", "blue"] }
//				-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
//				-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
//				-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
//				-{ image: "http://i.imgur.com/pT0i89v.png" }
//				-{ image: imageInstance }
//				-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
//				默认值为{ gradient: ["#3aeabb", "#fdd250"] }
		        gradient: ["#fece00","#ffa101"]
		    }
		}).on('circle-animation-progress', function(event, progress,stepValue) {//当图像正在绘制时的监听事件
		    $(this).find('strong').html(String((stepValue*100).toFixed(2)) + '<i>%</i>');
});

相关链接

官方地址：http://www.htmleaf.com/html5/html5-canvas/201505271918.html 

在线演示地址 ：https://my.weblf.cn/xly/demo/jq_canvas_step/compliance.html