js 环形渐变颜色进度条

最新推荐文章于 2024-06-27 10:31:04 发布

FullStack-KJ

最新推荐文章于 2024-06-27 10:31:04 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/dashenid/article/details/97899089

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：

代码：

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();
		}
	}
}

使用：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="js/CircularProgressBar.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			#canvas {
				border: 1px solid #999;
				background-color: lightblue;
			}
		</style>
	</head>

	<body>

		<canvas id="canvas" width="400" height="300">
			您的浏览器暂不支持canvas
		</canvas>

		<script>
			var circularProgressBar = new CircularProgressBar("canvas");
			circularProgressBar.refresh("100");
		</script>
	</body>

</html>

FullStack-KJ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 环形渐变颜色进度条

效果图：代码：CircularProgressBar.jsfunction CircularProgressBar(id) { var canvas = document.getElementById(id); var ctx = canvas.getContext('2d') var width = canvas.clientWidth; var height = ca...
复制链接

扫一扫

专栏目录