html+jquery 环形渐变进度条

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

主要适用：大屏显示。

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循环获取实时数据。

最后效果

大体符合需求，更自然效果仍需进一步调试。