使用Canvas创建非动画式圆形进度条不需要复杂的动画逻辑，核心是通过Canvas的绘图API绘制底层圆环和对应比例的进度圆环，再添加数值文本即可完成实现。这种方式可以根据需求灵活调整圆环颜色、宽度、半径等参数，适配不同的页面设计风格。
实现原理概述
非动画式圆形进度条的实现主要分为三个步骤：首先绘制一个完整的底层圆环作为背景，然后根据传入的进度比例计算对应的弧度，绘制对应长度的进度圆环，最后在圆环中心绘制当前进度的数值文本。整个过程不需要使用requestAnimationFrame等动画API，绘制完成后进度条状态固定。
基础HTML结构
首先需要在页面中准备一个Canvas元素，用来承载绘制的内容，同时可以设置元素的宽高和初始样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas圆形进度条</title>
<style>
.progress-container {
width: 300px;
margin: 50px auto;
}
#progressCanvas {
border: 1px solid #eee;
}
</style>
</head>
<body>
<div class="progress-container">
<canvas id="progressCanvas" width="300" height="300"></canvas>
</div>
<script src="progress.js"></script>
</body>
</html>
核心绘制逻辑实现
接下来在JavaScript文件中实现绘制逻辑，首先获取Canvas上下文，然后封装绘制函数，接收进度数值作为参数。
获取上下文与基础参数设置
先获取Canvas元素和2D绘图上下文，定义圆环的基础参数，包括圆心坐标、半径、圆环宽度、颜色等。
// 获取Canvas元素和上下文
const canvas = document.getElementById('progressCanvas');
const ctx = canvas.getContext('2d');
// 基础参数配置
const centerX = canvas.width / 2; // 圆心X坐标
const centerY = canvas.height / 2; // 圆心Y坐标
const radius = 120; // 圆环半径
const lineWidth = 20; // 圆环宽度
const bgColor = '#f0f0f0'; // 底层圆环颜色
const progressColor = '#409eff'; // 进度圆环颜色
const textColor = '#333'; // 文本颜色
绘制底层圆环
底层圆环是一个完整的圆，使用arc方法绘制，设置起始角度为0，结束角度为2π即可。
// 绘制底层背景圆环
function drawBgCircle() {
ctx.beginPath();
// 绘制完整圆环，起始角度0，结束角度2π
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = bgColor;
ctx.stroke();
}
绘制进度圆环
进度圆环需要根据传入的进度值计算对应的结束角度，进度范围是0到1，对应弧度范围是0到2π。
// 绘制进度圆环，progress为0-1之间的数值
function drawProgressCircle(progress) {
// 进度为0时不绘制
if (progress <= 0) return;
ctx.beginPath();
// 计算结束角度，进度乘以2π
const endAngle = Math.PI * 2 * progress;
// 起始角度设置为-π/2，让进度从顶部开始
ctx.arc(centerX, centerY, radius, -Math.PI / 2, endAngle - Math.PI / 2, false);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = progressColor;
// 设置圆环两端为圆角
ctx.lineCap = 'round';
ctx.stroke();
}
绘制中心数值文本
在圆环中心绘制当前进度的百分比文本，设置文本居中对齐，调整字体样式即可。
// 绘制中心进度文本
function drawProgressText(progress) {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = 'bold 36px Arial';
ctx.fillStyle = textColor;
// 转换为百分比格式，保留一位小数
const percent = (progress * 100).toFixed(1);
ctx.fillText(`${percent}%`, centerX, centerY);
}
完整调用逻辑
最后封装一个总的绘制函数，依次调用上述三个方法，传入需要的进度值即可完成绘制。
// 总的绘制函数，接收进度值0-1
function drawProgress(progress) {
// 清空画布，避免重复绘制残留
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBgCircle();
drawProgressCircle(progress);
drawProgressText(progress);
}
// 调用绘制函数，绘制75%的进度
drawProgress(0.75);
参数调整说明
如果需要修改进度条的样式，只需要调整基础参数配置部分的数值即可，常见的可调整参数如下：
- radius：调整圆环的半径，改变进度条的整体大小
- lineWidth：调整圆环的宽度，改变进度条的粗细
- bgColor/progressColor：调整圆环的颜色，适配不同的页面主题
- lineCap：调整进度圆环的两端样式，可选值有butt、round、square
注意事项
在Canvas绘制过程中需要注意以下几点：
1. Canvas的宽高如果通过CSS设置，会导致绘制内容拉伸，建议直接通过元素的width和height属性设置。
2. 绘制圆弧时，角度单位是弧度，转换公式为 角度 * Math.PI / 180。
3. 每次重新绘制前需要清空画布，避免之前的绘制内容残留。
4. 进度值需要限制在0到1之间，避免计算出现错误。
兼容性与扩展
上述实现使用的都是Canvas基础API，兼容所有支持HTML5的现代浏览器，如果需要适配更低版本的浏览器，可以添加对应的特性检测逻辑。如果需要添加动画效果，只需要在绘制进度圆环时，使用requestAnimationFrame逐步增加进度值即可，非动画式实现可以作为动画实现的基础版本。
Canvas圆形进度条HTML5JavaScript修改时间：2026-07-14 01:42:29