Canvas绘制加载进度条的核心是动态更新路径并重绘，线性通过fillRect或lineTo控制长度，圆形通过arc控制弧度，均需requestAnimationFrame动画、clearRect清除、抗锯齿优化及响应式适配。
Canvas绘制加载进度条，核心在于动态更新图形路径并重绘，线性与圆形效果本质都是控制绘制范围随进度变化。
线性进度条：用fillRect或lineTo控制长度
线性进度条最常用矩形填充或线条绘制，关键是把进度值（0-1）映射为像素长度。
- 确定容器宽高，比如画布宽300px，进度条高度20px，留出上下边距
- 当前宽度 = 总宽度 × 进度值，用
fillRect(x, y, width, height)填充矩形区域 - 若要带边框或渐变色，可用
strokeRect配合createLinearGradient，起点设在左端，终点在右端 - 文字提示可放在进度条右侧或居中，用
fillText配合textAlign对齐
圆形进度条：用arc绘制扇形或圆环
圆形进度条本质是绘制一个角度随进度变化的圆弧，再补全路径形成扇形或结合外圆构成环形。
- 完整圆周对应角度是
2 * Math.PI，当前弧度 =2 * Math.PI * 进度值 - 用
arc(cx, cy, radius, startAngle, endAngle)画弧，startAngle通常从-Math.PI / 2（顶部开始） - 若做环形进度，先画灰色底环，再用不同颜色画前景弧；注意设置
lineCap: 'round'让两端更圆润 - 动画流畅需用
requestAnimationFrame逐帧更新进度值，避免直接循环+setTimeout
通用优化点：性能与视觉细节
无论线性还是圆形，几个细节处理会让效果更专业。
- 每次重绘前调用
ctx.clearRect(0, 0, canvas.width, canvas.height)清除旧帧，避免残留 - 文字抗锯齿开启：
ctx.textBaseline = 'middle'; ctx.font = '14px sans-serif' - 进度数值变化建议加缓动，比如用
easeOutCubic(t) = t * t * t让加速/减速更自然 - 支持响应式：监听
window.resize重新计算尺寸，或用canvas.width = canvas.clientWidth同步CSS尺寸
简单封装思路：复用绘图逻辑
把参数抽成配置对象，就能快速实例化不同样式的进度条。
- 接受
type: 'linear' | 'circle'、progress、color、size等字段 - 内部统一管理canvas上下文、尺寸计算和重绘调度，对外暴露
update(progress)方法 - 支持回调如
onComplete，当progress ≥ 0.99时触发，避免浮点误差导致漏掉完成态
