js 环形渐变颜色进度条

效果图：

代码：

CircularProgressBar.js

function CircularProgressBar(id) {
	var canvas = document.getElementById(id);
	var ctx = canvas.getContext('2d')
	var width = canvas.clientWidth;
	var height = canvas.clientHeight;
	var minSizeValue = width;
	if (minSizeValue > height) {
		minSizeValue = height;
	}
	var centerValue = minSizeValue / 2;

	var _this = this;
	this.lineWidth = 10;
	this.bgLineWidth = _this.lineWidth / 2;

	this.startAngleFloat = 0.7; //范围0.5-1.5
	this.endAngleFloat = 2.3; //范围1.5-2.5;

	function bg() {
		ctx.beginPath();
		ctx.arc(width / 2, height / 2, centerValue - _this.bgLineWidth / 2, _this.startAngleFloat * Math.PI, _this.endAngleFloat *
			Math.PI); //进度绘制
		ctx.lineWidth = _this.bgLineWidth;
		ctx.shadowBlur = _this.bgLineWidth / 2;
		ctx.lineCap = "round";
		ctx.strokeStyle = "white";
		ctx.stroke();
	}
	bg();

	function left(endAngle) {
		ctx.beginPath();
		ctx.arc(width / 2, height / 2, centerValue - _this.bgLineWidth / 2, _this.startAngleFloat * Math.PI, endAngle * Math.PI); //进度绘制
		ctx.lineWidth = _this.lineWidth;
		ctx.shadowBlur = _this.lineWidth / 2;
		ctx.lineCap = "round";
		var g = ctx.createLinearGradient(0, height, 0, 0); //创建渐变对象  渐变开始点和渐变结束点
		g.addColorStop(0, 'rgb(22,189,62)'); //添加颜色点
		g.addColorStop(0.7, 'rgb(218,195,0)'); //添加颜色点
		g.addColorStop(1, 'rgb(237,143,40)'); //添加颜色点
		ctx.strokeStyle = g; //使用渐变对象作为圆环的颜色
		ctx.stroke();
	}

	function right(endAngle) {
		ctx.beginPath();
		ctx.arc(width / 2, height / 2, centerValue - _this.bgLineWidth / 2, 1.5 * Math.PI, endAngle * Math.PI); //进度绘制
		ctx.lineWidth = _this.lineWidth;
		ctx.shadowBlur = _this.lineWidth / 2;
		ctx.lineCap = "round";
		var g = ctx.createLinearGradient(width / 2, 0, width / 2, height); //创建渐变对象  渐变开始点和渐变结束点
		g.addColorStop(0, 'rgb(218,38,38)'); //添加颜色点
		g.addColorStop(0.3, 'rgb(156,38,155)'); //添加颜色点
		g.addColorStop(0.9, 'rgb(140,27,62)'); //添加颜色点
		ctx.strokeStyle = g; //使用渐变对象作为圆环的颜色
		ctx.stroke();
	}

	function center() {
		ctx.beginPath();
		ctx.arc(width / 2, height / 2, centerValue - _this.bgLineWidth / 2, 1.5 * Math.PI, 1.5 * Math.PI); //进度绘制
		ctx.lineWidth = _this.lineWidth;
		ctx.lineCap = "square";
		var g = ctx.createLinearGradient(width / 2 - 10, 0, width / 2 + 10, 0); //创建渐变对象  渐变开始点和渐变结束点
		g.addColorStop(0, 'rgb(237,143,40)'); //添加颜色点
		g.addColorStop(1, 'rgb(218,38,38)'); //添加颜色点
		ctx.strokeStyle = g; //使用渐变对象作为圆环的颜色
		ctx.stroke();
	}

	this.refresh = function(AQI) {
		var endAngle;
		if (AQI <= 150) {
			endAngle = (1.5 - _this.startAngleFloat) / 150 * AQI + _this.startAngleFloat;
			left(endAngle);
		} else {
			left(1.5);
			endAngle = (_this.endAngleFloat - 1.5) / 150 * (AQI - 150) + 1.5;
			right(endAngle);
			center();
		}
	}
}

使用：

	
		
		
		
		
		
		
	

	

		
			您的浏览器暂不支持canvas