createRadialGradient用于创建径向渐变，通过两个圆（x0,y0,r0与x1,y1,r1）定义起点和终点，需配合addColorStop添加色标（offset为0～1），再赋值给fillStyle或strokeStyle使用，支持模拟高光、柔边阴影及偏心光照等效果。
Canvas 中的 createRadialGradient 方法用于创建径向渐变，它通过定义两个圆（起始圆和结束圆）来生成从中心向外扩散的颜色过渡效果。
径向渐变的基本参数含义
调用方式：ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
- x0, y0, r0：起始圆的圆心坐标和半径，代表渐变“起点”
- x1, y1, r1：结束圆的圆心坐标和半径，代表渐变“终点”
- 两个圆可以重合、嵌套或分离；当 r0 = 0 时，常用来模拟光源点效果
- 渐变颜色沿两圆之间的插值路径变化，不是简单按距离线性混合
添加颜色停止点（addColorStop）
创建渐变对象后，必须用 addColorStop(offset, color) 添加至少两个色标才能生效：
- offset 是 0～1 的浮点数，0 表示起始圆位置，1 表示结束圆位置
- 可添加多个色标，例如
grad.addColorStop(0, '#fff')、grad.addColorStop(0.7, '#ff9')、grad.addColorStop(1, '#f33') - 重复添加相同 offset 会覆盖前值；顺序不影响渲染，只由 offset 决定位置
应用到图形绘制中
将渐变对象赋给绘图上下文的填充或描边属性即可使用：
-
ctx.fillStyle = grad→ 填充矩形、圆形、路径等 -
ctx.strokeStyle = grad→ 绘制带渐变边框的图形 - 注意：渐变坐标系基于 canvas 原点（左上角），不是图形自身坐标
- 若需随图形移动，需在绘制前重新计算渐变坐标（如让圆心对齐图形中心）
常见效果与技巧
利用参数组合可实现多种视觉效果：
- 模拟球体高光：小 r0（甚至为 0）、r1 略大于图形半径，色标从亮白过渡到主体色
- 柔边阴影：外圆略大于内圆，透明度从 1 降到 0（如
rgba(0,0,0,0.6)→rgba(0,0,0,0)） - 偏心渐变：x1/y1 与 x0/y0 不同，制造光照方向感（如 x1 = x0 + 20, y1 = y0 + 10）
- 避免“色带”：多加中间色标或使用 HSL 色彩空间平滑过渡
