Canvas 动态光影效果通过 globalCompositeOperation（如 lighter 模式）与分层绘制（环境光/主体/辉光三层）协同实现，结合鼠标或时间驱动的光源联动及离屏缓存等性能优化，无需 WebGL 即可呈现体积感与呼吸感。
Canvas 实现动态光影效果，不靠 WebGL 也能做出有体积感、呼吸感的视觉表现。关键不在“画得多逼真”，而在如何用有限的 2D 工具模拟光与形的关系——核心是全局复合操作（globalCompositeOperation）和分层混合策略的协同运用。
用 lighter 模拟光叠加，不是简单变亮
`lighter` 是实现加色混合最直接的模式，但它不是“让画面更白”，而是对重叠区域的 RGB 值逐通道相加（上限为 255）。 - 绘制顺序决定合成逻辑：先画底层（如带明暗过渡的模型面），再设 `ctx.globalCompositeOperation = 'lighter'`，最后画上层（如高光粒子、光斑遮罩） - 避免过曝：上层图层建议用低饱和浅色（如 `#e0f7fa` 或 `#fff8e1`），配合 `globalAlpha = 0.4–0.6` 控制叠加强度 - 注意重置：每帧开始前恢复默认模式 `source-over`，否则后续 UI 元素可能异常透出分层绘制：光晕 + 主体 + 辉光，三层不可少
真实光影有层次，Canvas 上需拆解为独立绘制层，再按物理逻辑叠加： - 底层（环境光/投影）：用 `createRadialGradient` 或 `createLinearGradient` 绘制半透明灰蓝渐变，`globalAlpha = 0.1–0.15`，模拟环境漫射与地面阴影 - 中层（主体结构）：填充主体形状（如魔方面、球体轮廓），颜色基于法向量点积实时计算亮度，不设 `globalCompositeOperation`，保持基础形态清晰 - 顶层（辉光/高光）：用 `shadowBlur + shadowColor` 加 `lighter` 模式绘制小圆或模糊椭圆，位置随光源方向微调，制造镜面反射错觉动态光源联动：鼠标或时间驱动，但要克制
光影“动”才有生命力，但过度变化会破坏视觉稳定性： - 鼠标映射：取 `event.clientX / window.innerWidth` 和 `event.clientY / window.innerHeight`，线性映射为光源方向 `[x, y, 1]` 并单位化，避免突兀跳变 - 时间驱动：用 `Date.now() * 0.001` 生成平滑相位，控制光源绕模型缓慢公转（如 `lightDir = [cos(t), sin(t), 0.5]`） - 两者可共存：静止时用时间驱动维持呼吸感，鼠标进入后切换为主动追踪，离开后缓回默认轨道性能友好型优化细节
复杂光影容易卡顿，以下做法能显著提升流畅度： - 离屏缓存：背景光晕、固定纹理等不变元素画到离屏 canvas，主循环只 `drawImage()` 一次 - 跳帧更新：粒子位移、噪声偏移等非关键动画每 2–3 帧刷新，视觉无断层，CPU 占用降 30% 以上 - 坐标对齐：所有图层绘制前统一做 `ctx.translate(canvas.width/2, canvas.height/2)`，避免因偏移累积导致精度漂移 - 高清适配：用 `window.devicePixelRatio` 动态设置 canvas 的 `width`/`height` 属性，再用 CSS 缩放回显示尺寸，防止模糊不复杂但容易忽略。
