效果图:
代码:
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>