Canvas径向渐变多色阶填充的关键在于色标offset严格单调递增且在[0,1]内，以及起始圆与结束圆的坐标和半径关系；offset表示从r₀到r₁的归一化距离，两圆心重合且r₀=0时呈标准圆形渐变，偏移则产生光斑偏移效果。
Canvas 绘制径向渐变时，多色阶填充的关键不是堆颜色数量，而是控制好色标位置与两圆关系——尤其当色阶超过两个时，容易因 offset 设置不当或圆心/半径错位导致色彩断裂、跳变或视觉“空心”。
色标位置必须严格单调递增
addColorStop 的 offset 值代表从起始圆边缘（r₀）到结束圆边缘（r₁）的归一化距离，0 是 r₀ 处，1 是 r₁ 处。即使你设 r₀=0、r₁=150，offset=0.3 仍表示半径为 45 的圆周位置。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 必须按 offset 从小到大顺序调用 addColorStop，比如先 0 → 再 0.25 → 再 0.7 → 最后 1
- 跳着加（如先加 0.7 再加 0.2）在部分浏览器（尤其是旧版 Safari）中会静默失败或渲染异常
- 避免使用超出 [0,1] 范围的值，例如 1.01 或 -0.1，会直接抛出 IndexSizeError
两圆配置决定渐变区域形状
createRadialGradient(x₀,y₀,r₀,x₁,y₁,r₁) 的六参数不是“中心点 + 内外半径”，而是两个独立圆：起始圆（小范围起点）和结束圆（大范围边界）。只有当 (x₀,y₀) ≡ (x₁,y₁) 且 r₀
- 推荐基础写法：圆心重合 + r₀=0（从一个点发散），例如 createRadialGradient(150,150,0,150,150,100)
- 若 r₀ > 0，比如设为 20，则从半径 20 的圆开始渐变，中心区域会是纯色（第一个 colorStop 的颜色）
- 若两圆心偏移（如 x₁=x₀+20），渐变会呈现“光斑偏移”或“斜射光”效果，适合模拟非对称光照
多色阶常见搭配与视觉意图
三个及以上色阶不是越多越好，关键看是否服务于目标效果。以下是几种高频实用组合：
- 球体高光：addColorStop(0, '#fff') → (0.15, '#ffeb3b') → (0.6, '#ff9800') → (1, 'rgba(0,0,0,0)')
- 柔和阴影过渡：addColorStop(0, 'rgba(0,0,0,0)') → (0.4, 'rgba(0,0,0,0.1)') → (1, 'rgba(0,0,0,0.4)')
- 霓虹发光：addColorStop(0, '#00f') → (0.3, '#0ff') → (0.7, '#f0f') → (1, 'rgba(255,0,255,0)')
填充前务必确认路径与绘制动作
Canvas 是状态机，gradient 只是 fillStyle 的一种取值，不自动触发绘制。漏掉关键步骤就会空白。
- 设置好 fillStyle 后，必须调用 fillRect()、fill()（配合 beginPath + arc 等）等填充方法
- 如果之前调用了 beginPath()，但没重新定义路径（比如没再画 arc 或 rect），fill() 将无图形可填
- 注意 canvas 尺寸变更影响：JS 修改 canvas.width/height 会清空画布并重置坐标系，已创建的 gradient 对象不会自动适配新尺寸
