Canvas中用径向渐变模拟球体光源需设同心圆渐变，配四段式颜色停靠（纯白→暖白→深棕→透明黑），再通过lighter叠加、destination-out阴影和低透明高光增强立体感。
在Canvas中用径向渐变模拟球体光源，核心是合理设置渐变中心、半径和颜色停靠点，让明暗过渡自然符合光照物理逻辑——亮部居中高亮，边缘柔和衰减，再叠加阴影或环境光可增强立体感。
一、创建基础径向渐变对象
使用 createRadialGradient(x0, y0, r0, x1, y1, r1) 定义从内圆到外圆的渐变。模拟球体光源时：
- x0/y0/r0 设为球心坐标和极小起始半径（如 0），代表最亮核心点
- x1/y1/r1 与 x0/y0 相同，但 r1 设为球体视觉半径（如 80），形成“同心圆渐变”
- 这样光线从中心最强处平滑衰减至边缘，符合点光源的平方反比衰减直觉
二、配色策略：模拟真实光晕层次
避免简单黑白灰过渡。推荐四段式颜色停靠：
- 0.0 → 纯白（高光焦点）
- 0.3 → 暖白/浅橙（主光区，带温度感）
- 0.7 → 深棕/半透褐（过渡暗部，暗示球体曲率）
- 1.0 → 全透明黑（完全消隐，不生硬截断）
用 addColorStop() 按顺序添加，透明度渐变能自然融入背景，强化“悬浮发光”效果。
立即学习“前端免费学习笔记（深入）”；
三、绘制与混合：提升立体真实感
单层渐变仍偏平面，需叠加处理：
- 先用 globalCompositeOperation = "lighter" 绘制主光源（增强亮度叠加）
- 再切换为 "destination-out" 在球体底部轻绘一个椭圆遮罩，模拟底部环境遮蔽形成的微弱阴影
- 最后用极低透明度（globalAlpha = 0.08）在球体左上补一小片浅白，模拟镜面高光偏移，打破对称性
四、动态优化建议
若用于交互场景（如鼠标跟随光源）：
- 渐变中心 (x0, y0) 应实时绑定鼠标位置，但 r1 保持固定，避免缩放失真
- 高光点（0.0 停靠）可略偏离球心（如 x0±3, y0±3），模拟入射角变化
- 背景色非纯黑时，将最后一段 stop 改为 带底色倾向的透明黑，防止光晕发虚
