Canvas绘制圆环进度条需三步：一、平移坐标系至中心并设圆角端点；二、分层用arc()绘制底环与动态弧，注意起始角为-π/2；三、用requestAnimationFrame驱动平滑动画，配合缓动函数和文字居中渲染。
用 Canvas 绘制带动画的圆环进度条，关键在三点：坐标系校准、分层绘制底环与动态弧、用 requestAnimationFrame 驱动平滑增长。不依赖框架，纯原生 JS 即可实现。
一、初始化画布并校准坐标原点
Canvas 默认原点在左上角，直接画圆会偏移。需先平移至中心：
- 获取 canvas 元素和 2D 上下文：
const ctx = canvas.getContext('2d') - 设 canvas 宽高相等（如 200），算出中心：
const cx = cy = canvas.width / 2 - 调用
ctx.translate(cx, cy)，后续所有坐标以 (0, 0) 为圆心 - 半径建议取
80（留出线宽余量），线宽设为12，并启用圆角端点：ctx.lineCap = 'round'
二、分层绘制底环与动态前景弧
圆环由静止背景 + 动态彩色弧组成，都用 arc()，但起止角度不同：
- 底环：固定画满一圈 ——
ctx.arc(0, 0, radius, 0, Math.PI * 2)，颜色用浅灰（如#eee） - 前景弧：从顶部（12 点方向）开始，即起始角为
-Math.PI / 2；结束角随进度变化：-Math.PI / 2 + (percent / 100) * Math.PI * 2 - 每次绘制前必须调用
ctx.beginPath()，避免路径累积导致描边异常
三、用 requestAnimationFrame 实现流畅动画
不用 setInterval，用浏览器原生帧调度保证 60fps：
立即学习“前端免费学习笔记（深入）”；
- 定义目标值（如
target = 75）和当前值（current = 0） - 每帧按步长（如
0.6）递增current，直到 ≥target - 清空画布时注意坐标系已平移：用
ctx.clearRect(-cx, -cy, canvas.width, canvas.height) - 可加入缓动函数增强观感，例如
easeOutCubic(t) = 1 - Math.pow(1 - t, 3)，让动画后半段减速
四、居中渲染百分比文字并适配响应式
文字要随进度同步更新，且视觉居中：
- 设置字体与对齐：
ctx.font = 'bold 32px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle' - 文字坐标写成
(0, 0)即可居中；若想微调垂直位置，y 可设为5或8 - 响应式处理：监听
window.resize，重设 canvas 的width/height属性（非 CSS），再触发重绘 - 高清屏适配：乘以
window.devicePixelRatio提升绘制分辨率，避免模糊
