Special point, circular progress bar, the color of the progress bar changes with the progress, from green to yellow, and finally to red.
Mainly applicable: large screen display.
html
<canvas id="canvas" width="160" height="170">cpu</canvas>
js call
Locate the position of the corresponding div
const canvas = $('.div').find('#canvas')[0];
updateProgress(canvas, 55, "CPU");
method
// Function to update progress bar
function updateProgress(canvas, percentage, val) {
const ctx1 = canvas.getContext("2d");
//Set the parameters of the circular progress bar
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50; //circular radius
var startAngle = -Math.PI / 2; // Start at 12 o'clock
var currentAngle = 0; // current angle
var endAngle = currentAngle; // End angle
var counterClockwise = false; // clockwise
endAngle = startAngle + (percentage / 100) * (Math.PI * 2);
ctx1.clearRect(0, 0, canvas.width, canvas.height);
// draw background color
ctx1.beginPath();
ctx1.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx1.lineWidth = 10;
ctx1.strokeStyle = "#ccc";
ctx1.stroke();
Draw progress
//ctx1.beginPath();
//ctx1.arc(centerX, centerY, radius, startAngle, endAngle, counterClockwise);
//ctx1.lineWidth = 10;
//ctx1.strokeStyle = "#4caf50"; // Progress bar color
//ctx1.stroke();
// drawing progress
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); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 94) {
var g = ctx1.createLinearGradient(0, 180, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 91) {
var g = ctx1.createLinearGradient(0, 150, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 89) {
var g = ctx1.createLinearGradient(0, 120, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 86) {
var g = ctx1.createLinearGradient(0, 100, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 83) {
var g = ctx1.createLinearGradient(0, 80, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 80) {
var g = ctx1.createLinearGradient(0, 60, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 79) {
var g = ctx1.createLinearGradient(0, 50, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 76) {
var g = ctx1.createLinearGradient(0, 40, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 73) {
var g = ctx1.createLinearGradient(0, 30, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 70) {
var g = ctx1.createLinearGradient(0, 20, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#FF0000'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 65) {
ctx1.strokeStyle = '#FFD700';
} else if (percentage > 60) {
var g = ctx1.createLinearGradient(0, 30, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#00FF00'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 55) {
var g = ctx1.createLinearGradient(0, 40, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#00FF00'); //Add color point
ctx1.strokeStyle = g;
}else if (percentage > 50) {
var g = ctx1.createLinearGradient(0, 0, 0, 60); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#00FF00'); //Add color point
//g.addColorStop(0.5, '#FFD700'); //Add color point
g.addColorStop(1, '#FFD700'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 45) {
var g = ctx1.createLinearGradient(0, 0, 0, 60); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#00FF00'); //Add color point
//g.addColorStop(0.5, '#FFD700'); //Add color point
g.addColorStop(1, '#FFD700'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 40) {
var g = ctx1.createLinearGradient(0, 0, 0, 70); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#00FF00'); //Add color point
//g.addColorStop(0.5, '#FFD700'); //Add color point
g.addColorStop(1, '#FFD700'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 30) {
var g = ctx1.createLinearGradient(0, 0, 0, 90); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#00FF00'); //Add color point
//g.addColorStop(0.5, '#FFD700'); //Add color point
g.addColorStop(1, '#FFD700'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 20) {
var g = ctx1.createLinearGradient(0, 0, 0, 90); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#00FF00'); //Add color point
//g.addColorStop(0.5, '#FFD700'); //Add color point
g.addColorStop(1, '#FFD700'); //Add color point
ctx1.strokeStyle = g;
} else if (percentage > 10) {
var g = ctx1.createLinearGradient(0, 180, 0, 0); //Create gradient object gradient start point and gradient end point
g.addColorStop(0, '#FFD700'); //Add color points
g.addColorStop(1, '#00FF00'); //Add color point
ctx1.strokeStyle = g;
} else {
ctx1.strokeStyle = '#00FF00';
}
ctx1.stroke();
ctx1.closePath();
// write the percentage
ctx1.textAlign = "right";
ctx1.font = "14px sans-serif";
ctx1.fillStyle = "#FFFFF0";
if (true) {
}
ctx1.fillText(val + "：" + percentage + "%", 140, 140);
}
Use the timer setInterval loop to obtain real-time data.
final effect
Generally meets the needs, more natural effects still need further debugging.