createRadialGradient 本质是两个圆间颜色插值，参数(x0,y0,r0,x1,y1,r1)分别定义起始圆与结束圆；r0常为0实现点状高光，r1控制最大影响半径；offset按相对距离归一化计算，需严格递增；须赋值fillStyle/strokeStyle并调用绘图方法才可见。
直接用 createRadialGradient 就能创建放射状径向渐变，关键不是“会不会调用”，而是六个参数怎么设才出效果——它本质是两个圆之间做颜色插值，不是“从点发散到圆”这种直觉模型。
认清两个圆：起始圆和结束圆
函数签名是 ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)，前三个定义“起始圆”（颜色起点），后三个定义“结束圆”（颜色终点）。注意：
- r0 常设为 0，让中心是一个纯色点（比如高光）；设为非零值会形成空心起始环
- r1 决定渐变影响的最大半径，超出 r1 的区域会直接使用最后一个
addColorStop(1, ...)的颜色 - 两圆圆心可以重合（同心渐变），也可以偏移（偏心渐变，模拟斜射光源）
- 即使 r0 > r1 或两圆分离，浏览器仍会计算插值，但视觉上可能出现收缩、拉伸或扇形扩散等非常规效果
配色与定位：addColorStop 的 offset 是归一化距离
addColorStop(offset, color) 的 offset 不是像素，而是从起始圆边缘（r0 处）到结束圆边缘（r1 处）的相对位置：
- offset = 0 对应 r0 圆周上的颜色
- offset = 1 对应 r1 圆周上的颜色
- offset = 0.5 表示在半径为
r0 + 0.5 * (r1 - r0)的圆上过渡 - offset 必须在 [0, 1] 区间且严格递增，否则部分浏览器会静默失败或报错
必须配合 fill 或 stroke 才可见
创建 gradient 对象只是准备数据，真正渲染靠绘图操作：
- 设置
ctx.fillStyle = gradient或ctx.strokeStyle = gradient - 紧接着调用
fill()、stroke()、fillRect()、arc()等 —— 漏掉这步就什么也不显示 - gradient 绑定的是创建时的 canvas 尺寸，后续 JS 修改
canvas.width/height不会自动更新已有 gradient
调试技巧：用 strokeRect 验证圆的位置
如果渐变看起来“偏了”或“没扩散”，先画出两个参考圆：
-
ctx.strokeRect(x0 - r0, y0 - r0, r0 * 2, r0 * 2)（起始圆边界） -
ctx.strokeRect(x1 - r1, y1 - r1, r1 * 2, r1 * 2)（结束圆边界） - 这样能直观看到两圆实际覆盖范围，避免坐标系混淆（所有坐标都以 canvas 左上角为原点，不响应 CSS transform）
