当前位置：首页 > news >正文

html+jquery 环形渐变进度条

news 2025/6/7 1:42:42

特殊点，环形进度条，随着进度变化进度条颜色，由绿色变为黄色，最后到红色。

主要适用：大屏显示。

html

<canvas id="canvas" width="160" height="170">cpu</canvas>

js 调用

定位到所属div位置
const canvas = $('.div').find('#canvas')[0];updateProgress(canvas, 55, "CPU");

方法

 // 更新进度条的函数function updateProgress(canvas, percentage, val) {const ctx1 = canvas.getContext("2d");// 设置环形进度条的参数var centerX = canvas.width / 2;var centerY = canvas.height / 2;var radius = 50; //环形半径var startAngle = -Math.PI / 2; // 从12点钟位置开始var currentAngle = 0; // 当前角度var endAngle = currentAngle; // 结束角度var counterClockwise = false; // 顺时针endAngle = startAngle + (percentage / 100) * (Math.PI * 2);ctx1.clearRect(0, 0, canvas.width, canvas.height);// 绘制底色ctx1.beginPath();ctx1.arc(centerX, centerY, radius, 0, Math.PI * 2, false);ctx1.lineWidth = 10;ctx1.strokeStyle = "#ccc";ctx1.stroke();绘制进度//ctx1.beginPath();//ctx1.arc(centerX, centerY, radius, startAngle, endAngle, counterClockwise);//ctx1.lineWidth = 10;//ctx1.strokeStyle = "#4caf50"; // 进度条颜色//ctx1.stroke();// 绘制进度ctx1.beginPath();ctx1.arc(centerX, centerY, radius, startAngle, endAngle, counterClockwise);if (percentage==100) {ctx1.strokeStyle = '#FF0000';} else if (percentage > 96) {var g = ctx1.createLinearGradient(0, 200, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 94) {var g = ctx1.createLinearGradient(0, 180, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 91) {var g = ctx1.createLinearGradient(0, 150, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 89) {var g = ctx1.createLinearGradient(0, 120, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 86) {var g = ctx1.createLinearGradient(0, 100, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;}  else if (percentage > 83) {var g = ctx1.createLinearGradient(0, 80, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 80) {var g = ctx1.createLinearGradient(0, 60, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 79) {var g = ctx1.createLinearGradient(0, 50, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 76) {var g = ctx1.createLinearGradient(0, 40, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 73) {var g = ctx1.createLinearGradient(0, 30, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 70) {var g = ctx1.createLinearGradient(0, 20, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点   g.addColorStop(1, '#FF0000'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 65) {ctx1.strokeStyle = '#FFD700';} else if (percentage > 60) {var g = ctx1.createLinearGradient(0, 30, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点               g.addColorStop(1, '#00FF00'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 55) {var g = ctx1.createLinearGradient(0, 40, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点               g.addColorStop(1, '#00FF00'); //添加颜色点     ctx1.strokeStyle = g;}else if (percentage > 50) {var g = ctx1.createLinearGradient(0, 0, 0, 60);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#00FF00'); //添加颜色点   //g.addColorStop(0.5, '#FFD700'); //添加颜色点g.addColorStop(1, '#FFD700'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 45) {var g = ctx1.createLinearGradient(0, 0, 0, 60);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#00FF00'); //添加颜色点   //g.addColorStop(0.5, '#FFD700'); //添加颜色点g.addColorStop(1, '#FFD700'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 40) {var g = ctx1.createLinearGradient(0, 0, 0, 70);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#00FF00'); //添加颜色点   //g.addColorStop(0.5, '#FFD700'); //添加颜色点g.addColorStop(1, '#FFD700'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 30) {var g = ctx1.createLinearGradient(0, 0, 0, 90);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#00FF00'); //添加颜色点   //g.addColorStop(0.5, '#FFD700'); //添加颜色点g.addColorStop(1, '#FFD700'); //添加颜色点     ctx1.strokeStyle = g;} else if (percentage > 20) {var g = ctx1.createLinearGradient(0, 0, 0, 90);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#00FF00'); //添加颜色点   //g.addColorStop(0.5, '#FFD700'); //添加颜色点g.addColorStop(1, '#FFD700'); //添加颜色点     ctx1.strokeStyle = g;}  else if (percentage > 10) {var g = ctx1.createLinearGradient(0, 180, 0, 0);  //创建渐变对象  渐变开始点和渐变结束点g.addColorStop(0, '#FFD700'); //添加颜色点         g.addColorStop(1, '#00FF00'); //添加颜色点     ctx1.strokeStyle = g;}  else {ctx1.strokeStyle = '#00FF00';}ctx1.stroke();ctx1.closePath();// 写上百分比ctx1.textAlign = "right";ctx1.font = "14px sans-serif";ctx1.fillStyle = "#FFFFF0";if (true) {}ctx1.fillText(val + "：" + percentage + "%", 140, 140);}

使用定时器setInterval循环获取实时数据。

最后效果