必须用 'lighter' 而非 'source-over'，因其执行通道级亮度相加（如红200+白255→255），自然产生过曝辉光；各光效层需单独绘制并统一设该模式，配合分层（主光斑/晕环/星芒）、局部重绘和硬件加速以保障性能与兼容性。
用 globalCompositeOperation = 'lighter' 实现光效叠加，核心是“亮度相加”——不是简单覆盖或混合颜色，而是让重叠区域的像素值逐通道相加，超出255则截断为255，从而自然产生过曝、辉光、星芒等光学增强效果。
为什么必须用 lighter 而不是默认模式
默认的 source-over 是“上层盖下层”，后画的内容会遮挡前一层；而 lighter 是真正的加法合成：红（200,0,0）+ 白（255,255,255）→（255,255,255），蓝（0,0,200）+ 黄（255,255,0）→（255,255,200）。这种叠加方式天然适配光斑、晕环、拖尾等需要“越叠越亮”的视觉元素。
- 所有光效组件（主光斑、晕环、星芒、色散条纹）都应单独绘制，且每次绘制前设一次
ctx.globalCompositeOperation = 'lighter' - 若中途切换其他模式（如
multiply），之后必须显式重置回lighter，否则后续光效失效 - 避免在循环中反复设置该属性——它属于上下文状态，设一次即可生效至下次更改
分层构建真实感光效
单一白色圆点毫无镜头感。真实光晕由多个物理层级构成，每层用不同尺寸、透明度和模糊程度绘制，并统一用 lighter 叠加：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
主光斑：小圆（直径10–30px），中心纯白、边缘用
createRadialGradient做透明渐变，不模糊 -
晕环：稍大圆环（直径60–120px），strokeStyle 设为
rgba(255,255,255,0.3)，线宽8–15px，可轻微高斯模糊（两次 drawImage 缩放实现） -
星芒：从中心出发，用
lineTo绘6–8条细长白线，长度80–150px，角度间隔45°或60°，透明度设为0.2–0.4 - 每层绘制后不调用
clearRect，直接画下一层——lighter会自动累积亮度
保持高性能与响应性
光效常需随鼠标或滚动实时移动，频繁全屏重绘极易卡顿，尤其在移动端：
- 用两层 canvas：底层固定背景图，上层仅承载光效，且
canvas.style.will-change = 'transform'触发硬件加速 - 移动时只清除局部区域（如
ctx.clearRect(x-60, y-60, 120, 120)），再重绘该范围内的全部光效组件 - 所有图像/图形统一缩放到目标尺寸再绘制，避免 drawImage 内部插值损耗精度；如需缩放整体效果，用 CSS
transform: scale()控制 canvas 元素，而非改 width/height 属性 - 动画驱动必须用
requestAnimationFrame，禁用setTimeout或setInterval
导出与兼容性注意
完成光效后若需保存为图片，调用 toDataURL() 前确保：
- 所有参与绘制的图片已设
crossOrigin = 'anonymous'，否则导出会抛 SecurityError - Safari 对
lighter支持稳定，但旧版 iOS（如 iOS 15.3 及更早）对lighten等模式有 bug，lighter是最安全选择 - 若需支持 IE，
lighter在 IE9+ 中可用，但无法与 WebGL 模糊结合，建议降级为多层半透明白色 PNG 叠加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
