用Canvas制作圆环进度条的核心是arc()画弧+stroke()描边+动态更新角度，配合requestAnimationFrame实现平滑动画；需初始化canvas、设置坐标原点、绘制底环与前景弧、封装函数并支持响应式及文字显示。
用 Canvas 制作圆环进度条，核心是用 arc() 画圆弧 + stroke() 描边 + 动态更新起始/结束角度，再配合 requestAnimationFrame 实现平滑加载动画。不需要额外库，纯原生 JS 就能搞定。
一、HTML 结构与 Canvas 初始化
先准备一个 元素，并获取 2D 上下文：
<canvas id="progressCanvas" width="200" height="200"></canvas>
JS 中获取上下文并设置基础参数：
- 定义圆心坐标（通常为 canvas 宽高一半）
- 设定半径（留出描边空间，比如
radius = 80） - 设置线宽（如
lineWidth = 12）和描边样式 - 注意：Canvas 坐标原点在左上角，需用
ctx.translate(cx, cy)把原点移到中心，让绘图更直观
二、绘制背景圆环与动态进度弧
圆环进度条由两部分组成：静止的底环（灰色） + 动态增长的前景弧（彩色）。两者都用 arc()，但角度不同：
- 底环：固定从
0弧度画到2 * Math.PI（完整一圈） - 前景弧：起始角固定为
-Math.PI / 2（让 0% 从顶部开始），结束角 =-Math.PI / 2 + (percent / 100) * 2 * Math.PI - 关键细节：Canvas 默认顺时针绘图，所以把起始角设为
-π/2（即 -90°），就能让进度从 12 点钟方向开始顺时针增长
三、实现加载动画逻辑
不用 setInterval，用 requestAnimationFrame 更流畅。基本流程是：
- 定义目标百分比（如
target = 75）和当前百分比（current = 0） - 每帧按一定步长（如
0.5）递增current，直到达到target - 每次更新后清空画布（
ctx.clearRect(-cx, -cy, width, height)，注意 translate 后的坐标系）、重绘底环、再绘前景弧 - 可加入缓动效果：用
easeOutCubic(t) = 1 - Math.pow(1 - t, 3)让加速变慢，更自然
四、增强实用性的小技巧
让圆环进度条更健壮、易复用：
- 封装成函数，接收 canvas 元素、目标值、颜色、线宽等参数
- 支持百分比以外的数值范围（如 0–1000），内部自动归一化
- 添加文字居中显示（用
ctx.textAlign = 'center'和ctx.textBaseline = 'middle'） - 响应式处理：监听
window.resize重新设置 canvas 的width/height属性（不是 CSS 宽高），再重绘
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
