js 环形渐变颜色进度条

偏执的太偏执、 2021-11-18 00:01 676阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhc2hlbmlk_size_16_color_FFFFFF_t_70][]

代码：

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhc2hlbmlk_size_16_color_FFFFFF_t_70]: /images/20211116/eb89db37b0014b66939a383f1bba42d6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，676人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas实现环形进度条

与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。效果图 ![在这里插入图片描述][d99d1fd6a

分手后的思念是犯贱/ 2024年02月20日 12:30/ 0 赞/ 25 阅读

相关 QML制作环形进度条，使用ConicalGradient锥形渐变

QML中没有直接提供环形进度条组件，但是我们可以自己实现，如用Canvas、Shape、QPainter等等。我参照涛哥的代码（[https://github.com/jare

你的名字/ 2023年07月17日 09:59/ 0 赞/ 45 阅读

相关实现环形进度条

<view class="circleProgress_wrapper"> <view class="text">{ {proText}

- 日理万妓/ 2023年07月15日 11:24/ 0 赞/ 14 阅读

相关 vue 环形进度条

![在这里插入图片描述][20201009093934659.png_pic_center] cnpm install vue-circleprogressbar

客官°小女子只卖身不卖艺/ 2022年12月13日 01:29/ 0 赞/ 260 阅读

相关 van-Circle 环形进度条

van-Circle 环形进度条 ![在这里插入图片描述][20210309235028983.gif] 涉及的功能点：圆形进度条：文本自定义样式大小

爱被打了一巴掌/ 2022年10月23日 08:23/ 0 赞/ 559 阅读

相关 Android进度条ProgressBar颜色的渐变设置

Android进度条ProgressBar颜色的渐变设置前言: Android系统并没有为我们提供设置进度条颜色渐变的属性、方法，使用系统的属性方法只能把进度条设置为一

绝地灬酷狼/ 2022年06月09日 09:14/ 0 赞/ 823 阅读

相关 js 环形渐变颜色进度条

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

偏执的太偏执、/ 2021年11月18日 00:01/ 0 赞/ 677 阅读

相关环形进度条（jQuery，canvas）

接到了一个在手机app上绘制圆环进度条的需求。找了很多插件都不是很满意，就自己用jQuery+canvas画了一个。最终效果图 ![这里写图片描述][70] 完整代码

╰+攻爆jí腚メ/ 2021年09月27日 06:18/ 0 赞/ 475 阅读

相关环形变色进度条

思路: svg 两个圆,一个为进度条底色,一个为进度条,使圆环内部填充颜色不可见,设置外部边框线为stroke-dasharray=‘0,xxx’和线宽

r囧r小猫/ 2021年07月25日 00:03/ 0 赞/ 527 阅读

相关重构-环形进度条

动画: 颜色变化、宽度增加圆环实现: svg中两个圆,背景色都为none,通过设置边框为虚线,其中一个做背景,虚线的实线长度来实

约定不等于承诺〃/ 2021年07月24日 20:19/ 0 赞/ 517 阅读