Canvas绘制渐变环形进度条的关键是起始角定位（设为-π/2使进度从顶部开始）、角度动态映射（百分比线性转弧度）、渐变方向对齐（线性渐变坐标需匹配弧线切线方向）。
Canvas 绘制渐变环形进度条的关键不在“画圆”，而在于**起始角定位、角度动态映射、渐变方向对齐**这三点。只要理清弧度逻辑，再配上合适的渐变设置，就能稳定输出顺滑、起点准确、颜色过渡自然的环形进度效果。
起始角设为 -π/2，让进度从顶部开始
Canvas 默认以 3 点钟方向（x 轴正向）为 0 弧度，顺时针绘图。但用户习惯中，进度条通常从 12 点钟方向（正上方）开始增长。解决方法是把起始角固定为 -Math.PI / 2（即 -90°），这样 0% 就对应顶部，后续每增加 1%，弧长就增加 2π / 100 弧度。
- 底环（背景）：起始角 0，结束角 2 * Math.PI（完整一圈）
- 前景弧（进度）：起始角 -Math.PI / 2，结束角 = -Math.PI / 2 + (percent / 100) * 2 * Math.PI
- 若需逆时针增长（如从顶部往左），只需将
counterclockwise设为 true，并调整起始/结束角顺序
渐变方向要匹配圆弧走向
环形渐变不是“绕圈渐变”，而是用线性渐变模拟弧面色彩流动。关键在于：渐变坐标轴必须与圆弧切线方向大致一致，否则颜色会拉伸错位或出现突变。
- 推荐做法：以圆心为基准，设置渐变起点和终点在圆心水平方向两侧，例如
createLinearGradient(cx - r, cy, cx + r, cy) - 若进度弧集中在上半圆，可微调为
createLinearGradient(cx, cy - r, cx, cy + r)实现垂直渐变，更贴合视觉流向 - 添加至少两个色停点：
addColorStop(0, '#4facfe')和addColorStop(1, '#00f2fe')，避免单色过渡生硬
渲染时注意线宽与 lineCap 的配合
环形进度条边缘是否圆润，不只取决于渐变，更依赖描边控制。尤其当 lineWidth 较大时，lineCap 设置不当会导致两端突兀或重叠。
- 务必设置
ctx.lineCap = 'round'，让弧线首尾呈半圆形收口 - 底环与前景弧使用相同半径、相同 lineWidth，且圆心完全重合，否则会出现偏移或露白
- 若发现边缘有锯齿，可将 canvas 像素尺寸设为显示尺寸的 2 倍，再用 CSS 缩放还原（如 canvas.width=400; canvas.height=400; style="width:200px;height:200px;"）
百分比转弧度要统一单位，避免重复计算
每次绘制都重新算一遍 (percent / 100) * 2 * Math.PI 容易出错，也影响性能。建议封装一个角度转换工具函数：
const percentToRad = (p, offset = -Math.PI / 2) => offset + p * Math.PI * 2 / 100- 调用时直接写
ctx.arc(cx, cy, r, percentToRad(0), percentToRad(percent)) - offset 参数支持自定义起始方向，比如设为
0就从右侧开始，设为Math.PI就从左侧开始
