本教程将指导您如何使用html canvas和javascript创建一个直接显示目标百分比的圆形进度条，而无需动画过渡效果。我们将分析一种常见的动画实现方式，并提供两种修改方案：一种是基于现有动画结构的快速调整，另一种是更纯粹的静态渲染方法，同时也会探讨纯css实现静态进度条的优势。
在前端开发中，圆形进度条是一种常见的UI元素，用于展示加载进度、任务完成度等。通常，这些进度条会伴随动画效果，从0%逐渐增长到目标百分比。然而，在某些场景下，我们可能需要一个静态的进度条，即直接显示最终百分比，不进行任何动画过渡。本文将详细介绍如何利用HTML Canvas实现这种非动画的圆形进度条。
1. 基础结构与动画实现原理
首先，我们来看一个典型的使用Canvas实现动画圆形进度条的代码结构。它包含一个HTML Canvas元素用于绘图，一个<span>元素显示百分比文本，以及一些CSS样式来定位和美化。
HTML 结构 (index.html)
<div class="canvas-wrap"> <canvas id="canvas" width="300" height="300"></canvas> <span id="procent"></span> </div>
CSS 样式 (style.css)
:root {
background: #fff;
}
span#procent {
display: block;
position: absolute;
left: 50%;
top: 50%;
font-size: 50px;
transform: translate(-50%, -50%);
color: #3949AB;
}
span#procent::after {
content: '%';
}
.canvas-wrap {
position: relative;
width: 300px;
height: 300px;
}JavaScript 动画逻辑 (script.js)
window.onload = function() {
var can = document.getElementById('canvas'),
spanProcent = document.getElementById('procent'),
c = can.getContext('2d');
var posX = can.width / 2,
posY = can.height / 2,
fps = 1000 / 200, // 每秒200帧
procent = 0,
oneProcent = 360 / 100, // 1%对应的角度
targetResult = oneProcent * 64; // 目标百分比64%对应的角度
c.lineCap = 'round'; // 设置线条端点样式为圆形
arcMove();
function arcMove(){
var deegres = 0; // 当前绘制角度，从0开始
var acrInterval = setInterval (function() {
deegres += 1; // 每次递增1度，产生动画效果
c.clearRect( 0, 0, can.width, can.height ); // 清除画布
procent = deegres / oneProcent; // 计算当前百分比
spanProcent.innerHTML = procent.toFixed(); // 更新文本百分比
// 绘制背景灰色圆环
c.beginPath();
c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
c.strokeStyle = '#b1b1b1';
c.lineWidth = '10';
c.stroke();
// 绘制蓝色进度圆弧
c.beginPath();
c.strokeStyle = '#3949AB';
c.lineWidth = '10';
c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
c.stroke();
// 当达到目标角度时，清除定时器
if( deegres >= targetResult ) clearInterval(acrInterval);
}, fps);
}
}这段代码通过 setInterval 定时器不断地增加 deegres 变量，并重新绘制进度圆弧，从而实现了从0%到64%的动画效果。
2. 实现非动画式进度条
要实现非动画式进度条，即直接显示最终状态，我们需要修改 arcMove 函数中的逻辑，使其不再通过逐步递增 deegres 来绘制。
方案一：基于现有动画结构的快速调整
最简单的修改方式是，在 arcMove 函数内部，将 deegres 的初始值直接设置为目标角度 targetResult。这样，当 setInterval 第一次执行时，deegres 已经接近或等于 targetResult，在 deegres += 1 之后，if( deegres >= targetResult ) 条件会立即满足，从而清除定时器。实际上，它只绘制了一次最终状态。
修改后的 JavaScript 代码
window.onload = function() {
var can = document.getElementById('canvas'),
spanProcent = document.getElementById('procent'),
c = can.getContext('2d');
var posX = can.width / 2,
posY = can.height / 2,
fps = 1000 / 200,
procent = 0,
oneProcent = 360 / 100,
targetResult = oneProcent * 64; // 目标百分比64%对应的角度
c.lineCap = 'round';
arcMove();
function arcMove(){
// 关键修改：将 deegres 的初始值直接设为目标角度
var deegres = targetResult;
// 尽管仍使用 setInterval，但它会立即执行并清除
var acrInterval = setInterval (function() {
// 这里的 deegres += 1 会让 deegres 超过 targetResult
// 从而在第一次迭代后就满足清除条件
deegres += 1;
c.clearRect( 0, 0, can.width, can.height );
procent = deegres / oneProcent;
spanProcent.innerHTML = (targetResult / oneProcent).toFixed(); // 直接显示目标百分比
// 绘制背景灰色圆环
c.beginPath();
c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
c.strokeStyle = '#b1b1b1';
c.lineWidth = '10';
c.stroke();
// 绘制蓝色进度圆弧
c.beginPath();
c.strokeStyle = '#3949AB';
c.lineWidth = '10';
c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
c.stroke();
// 条件立即满足，清除定时器
if( deegres >= targetResult ) clearInterval(acrInterval);
}, fps);
}
}注意事项：
- 虽然这种方法实现了静态显示，但它仍然启动了一个 setInterval，尽管该定时器会立即被清除。对于追求极致性能和代码简洁性的场景，这并不是最理想的方案。
- spanProcent.innerHTML 的更新也需要调整，直接显示 targetResult 对应的百分比，而不是 deegres 计算出的百分比。
方案二：纯静态渲染（推荐）
更优雅和高效的静态进度条实现方式是完全移除 setInterval，让 arcMove 函数只执行一次绘制操作。
优化后的 JavaScript 代码
window.onload = function() {
var can = document.getElementById('canvas'),
spanProcent = document.getElementById('procent'),
c = can.getContext('2d');
var posX = can.width / 2,
posY = can.height / 2,
oneProcent = 360 / 100,
targetPercentage = 64, // 目标百分比
targetDegrees = oneProProcent * targetPercentage; // 目标百分比对应的角度
c.lineCap = 'round';
drawStaticArc(targetDegrees, targetPercentage); // 直接调用绘制函数
function drawStaticArc(degrees, percentage){
c.clearRect( 0, 0, can.width, can.height ); // 清除画布
spanProcent.innerHTML = percentage.toFixed(); // 直接显示目标百分比
// 绘制背景灰色圆环
c.beginPath();
c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
c.strokeStyle = '#b1b1b1';
c.lineWidth = '10';
c.stroke();
// 绘制蓝色进度圆弧
c.beginPath();
c.strokeStyle = '#3949AB';
c.lineWidth = '10';
c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + degrees) );
c.stroke();
}
}优点：
- 代码更简洁，逻辑更清晰。
- 没有不必要的定时器开销，性能更好。
- 函数命名更符合其功能（drawStaticArc）。
3. 纯CSS实现静态进度条（作为替代方案）
对于纯粹的静态进度条，如果不需要Canvas提供的复杂绘图能力，CSS可能是更简单、性能更好的选择。例如，可以使用conic-gradient属性来创建圆形进度条。
HTML
<div class="css-progress-wrap"> <div class="css-progress-bar"></div> <span class="css-procent">64%</span> </div>
CSS
.css-progress-wrap {
position: relative;
width: 140px; /* 直径 */
height: 140px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #b1b1b1; /* 背景圆环颜色 */
}
.css-progress-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
/* 使用 conic-gradient 创建进度条 */
background: conic-gradient(
#3949AB 0% 64%, /* 进度颜色和百分比 */
#b1b1b1 64% 100% /* 背景颜色 */
);
/* 模拟圆环效果，中间挖空 */
-webkit-mask: radial-gradient(farthest-side, transparent calc(70px - 10px), #000 0); /* 70px半径 - 10px线宽 */
mask: radial-gradient(farthest-side, transparent calc(70px - 10px), #000 0);
}
.css-procent {
position: absolute;
font-size: 30px;
color: #3949AB;
z-index: 1; /* 确保文本在进度条上方 */
}这种纯CSS方案的优点是代码量少，易于维护，且渲染性能通常优于Canvas，尤其是在不需要复杂交互和动态绘制时。
总结
本文探讨了如何在HTML Canvas中实现非动画式的圆形进度条。我们从一个典型的动画实现开始，逐步优化，提供了两种JavaScript方案：一种是快速调整现有动画逻辑使其立即显示结果，另一种是更推荐的纯静态绘制方法。此外，我们也介绍了使用CSS conic-gradient 实现静态进度条的替代方案。在实际开发中，应根据项目需求（是否需要复杂动画、交互、性能要求等）选择最合适的实现方式。对于简单的静态显示，纯CSS通常是最佳选择；而对于需要复杂动态效果或大量图形操作的场景，Canvas则更具优势。
