使用jquery-circle-progress绘制canvas渐变环形进度条

本文介绍如何使用jquery-circle-progress绘制canvas渐变环形进度条。

先引入文件：

再创建html元素：

根据元素的id选择器绘制进度条：

$('#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大小，你可以设置你需要的值。默认值为auto
		    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)) + '%');
		});

完整代码：

	

		

		
11111
	
	

		

		
22222
	
	

		

		
33333
	
	

		

		
44444
	
	

		

		
55555
	
	

		

		
66666
	
	

效果截图：

官网地址：点击打开链接

demo地址：https://my.weblf.cn/xly/demo/jq_canvas_step/compliance.html

如果不需要用到渐变，可使用css3制作单色环形进度条：点击打开链接