加色混合需用 Canvas 的 'lighter' 模式实现像素级实时合成。先绘制底层，再设 globalCompositeOperation = 'lighter' 绘制上层，配合 globalAlpha 与运动控制亮度和动态感，注意状态重置与坐标对齐。
用 Canvas 的 globalCompositeOperation 实现两个动态图层的加色混合（即“亮化”效果），核心是设置为 'lighter' 模式，它会对重叠区域的 RGB 值直接相加，产生自然的光晕、融合或高光效果。这不是 CSS 混合，而是像素级实时合成，适合动画场景。
关键步骤：准备画布与图层顺序
Canvas 合成依赖绘制顺序——先画的图层是“目标”，后画的是“源”。加色混合必须让两个图层在同一个 canvas 上先后绘制，不能靠 DOM 层叠。
- 确保 canvas 尺寸匹配预期显示区域，避免缩放失真
- 两个图层（如移动的圆形、飘动的粒子、渐变遮罩）都需通过
drawImage()或fillRect()等方式绘制到同一上下文 - 清除画布建议用
ctx.clearRect(0, 0, width, height)，而非fillStyle = 'white'; fillRect()，否则白色底会参与加色计算
启用加色混合：设置 globalCompositeOperation
在绘制第二个图层前，将合成模式设为 'lighter'。该模式不受浏览器兼容性限制，所有现代浏览器（含 Safari、Chrome、Firefox）均支持。
- 代码示例：
ctx.drawImage(layer1, x1, y1); // 先绘制底层 ctx.globalCompositeOperation = 'lighter'; ctx.drawImage(layer2, x2, y2); // 后绘制的图层自动叠加发光
- 注意：每次动画帧开始时需重置该属性，避免被其他绘图逻辑覆盖（例如某段 UI 绘制误设为
'source-over'） - 若需在单帧中混合多个图层，可连续使用
'lighter'，每次新绘都会与当前 canvas 内容相加
增强动态感：结合透明度与运动
纯加色易过曝，配合 globalAlpha 可控亮度层次，让混合更柔和自然。
立即学习“前端免费学习笔记（深入）”；
- 对运动图层单独设透明度：例如
ctx.globalAlpha = 0.7;再绘制，再切回'lighter'，能模拟光斑扩散或余晖拖尾 - 两个图层用不同速度/方向位移（如一个横向匀速，一个带弹性缓动），叠加时会产生流动光纹
- 避免大面积纯白填充——用浅灰（
#eee）、淡黄（#fffae6）等低饱和色作为图层底色，加色后更耐看
常见问题与绕过技巧
遇到图层不混合、颜色发灰或闪烁，多因状态管理或绘制时机出错。
- 图层没真正重叠？检查坐标是否因缩放、transform 或 canvas 坐标系偏移导致视觉错位
- 混合失效？确认没有在中间调用
save()/restore()时意外覆盖了globalCompositeOperation - 想局部加色（如只在圆形区域内）？先用
'source-in'剪裁出区域，再在该区域用'lighter'绘制光效 - 性能敏感时，避免每帧全量重绘；可用离屏 canvas 预渲染静态部分，主 canvas 仅负责动态叠加
