本教程将指导您如何使用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; }
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则更具优势。