canvas无法直接实现路径颜色随位置渐变，需通过分段采样、hsl空间颜色插值、预生成lut及逐段绘制模拟：先将路径离散为n段，按归一化进度t∈[0,1]查表或插值得hsl色（h跨0°时取最小弧），转rgb后逐段设置strokestyle，并启用抗锯齿与圆角端点提升平滑感。
Canvas 本身不支持“路径颜色随位置渐变”这种高级渲染能力，但可以通过分段采样 + 颜色插值 + 逐段绘制的方式模拟出视觉上平滑过渡的渐变路径效果。关键不是给整条路径设一个渐变 fillStyle，而是让路径上每一段都匹配其所在位置对应的颜色。
颜色映射需基于归一化进度而非原始坐标
路径颜色变化应与动画进度或路径长度相关，而不是像素坐标。例如：从起点到终点，颜色按 t ∈ [0,1] 线性过渡（蓝→红），t = 0 时为起始色，t = 1 时为目标色。为此必须：
- 先将路径离散为 N 段（如 50–200 段），用 De Casteljau 或等参数采样获取各段中点坐标
- 对第 i 段，计算其归一化位置：t = i / (N−1)（确保首尾精确对应 0 和 1）
- 用该 t 值查颜色梯度表（LUT）或实时插值，得到 RGB/HSL 值
推荐用 HSL 空间做插值，避免 RGB 的灰浊感
直接对 R、G、B 分量线性插值，在跨色相区域（如青→红、蓝→黄）易产生发灰、失饱和的中间色。HSL 更符合人眼感知：
- 把起始色和目标色统一转为 HSL（H∈[0,360)，S/L∈[0,1]）
- H 插值需处理跨 0° 边界：若 H₀=350°、H₁=10°，应按 350→360→10 计算，而非 350→10（差值取最小弧）
- S 和 L 直接线性插值即可；最后再转回 RGB 用于 strokeStyle
性能优化：预生成颜色查找表（LUT）
每帧对上百个线段重复做 HSL↔RGB 转换开销大。实际项目中建议预先构建 256 级 LUT：
- 创建数组 lut = new Uint8ClampedArray(256 * 4)（RGBA 各占 1 字节）
- 对每个索引 i（0～255），计算 t = i / 255，查对应 HSL 插值结果，存入 lut[i*4]～lut[i*4+3]
- 绘制时，根据当前段位置 t 得到 index = Math.round(t * 255)，直接查 lut[index*4] 等取 RGB
绘制策略：用多段短直线或小贝塞尔逼近渐变路径
Canvas 不支持路径级渐变描边，只能靠“视觉欺骗”实现平滑感：
- 将原路径拆成细粒度线段（如每 2–5 像素一段），每段独立设置 strokeStyle
- 或改用 quadraticCurveTo 连续绘制，每段控制点微调以保持曲率连贯，同时每段 strokeStyle 按位置更新
- 启用抗锯齿：ctx.imageSmoothingEnabled = true，并设 lineCap/lineJoin 为 'round'
