用canvas绘制光晕本质是高斯模糊+径向渐变叠加：先画白色圆形核心，再用createRadialGradient实现透明渐变，最后通过多次drawImage缩放或WebGL做高斯模糊，并以globalCompositeOperation='lighter'分层叠加主光斑、晕环、星芒等组件模拟光学过曝效果。
用 canvas 绘制光晕本质是高斯模糊 + 径向渐变叠加
纯 HTML/CSS 无法真正实现动态、可调的镜头光晕（lens flare），因为光晕需要模拟光线在镜头内部多次反射、散射的物理效果，涉及像素级亮度叠加和方向性衰减。最可靠的方式是用 canvas 手动绘制：先画一个白色圆形作为光源核心，再用 createRadialGradient 做向外扩散的透明渐变，最后对整个图层做轻微高斯模糊（通过多次重复 drawImage 缩放实现简易模糊，或用 WebGL/OffscreenCanvas 更精准）。CSS 的 filter: blur() 只能全局模糊，无法控制光晕的方向性、色偏或多重光斑层次。
canvas 中用 globalCompositeOperation = 'lighter' 叠加多层光斑
真实镜头光晕包含主光斑、晕环、星芒、色散条纹等。在 canvas 中，必须把它们分层绘制，并设 ctx.globalCompositeOperation = 'lighter'——这样多个半透明白色光斑叠加时会自动“相加亮度”，模拟光学过曝效果。若用默认的 'source-over'，后画的图层会遮盖前一层，失去光晕的通透感。
- 主光斑：小圆点 + 径向渐变（中心不透明，边缘全透明）
- 晕环：稍大圆环，
strokeStyle设为带透明度的白色，线宽较粗 - 星芒：用
lineTo绘制放射状细线，角度间隔 45° 或 60° - 每层绘制后调用
ctx.globalCompositeOperation = 'lighter'确保叠加生效
移动端性能差？避免每帧重绘整个光晕
光晕动画（如随鼠标移动）若每帧清空 canvas 再重绘所有光斑，iOS Safari 容易掉帧。更优做法是：只清空局部区域（ctx.clearRect(x-50, y-50, 100, 100)），或用两层 canvas —— 底层固定背景，上层仅绘制并移动光晕，且上层 canvas 设置 style.will-change: transform 触发硬件加速。
- 不要在
requestAnimationFrame里反复调用ctx.drawImage(wholeCanvas, ...)做模糊 - 预渲染静态光晕纹理到一个离屏
canvas，运行时只缩放+合成 - 安卓 WebView 对
shadowBlur支持不稳定，慎用
CSS 滤镜只能做“假光晕”，但适合静态封面图
如果只是静态展示（比如 banner 图上的装饰性光晕），可用 CSS 快速实现近似效果：给一个 <div> 设为圆形，background: radial-gradient(circle at center, white, transparent 70%)，再套两层 filter: blur(20px) opacity(0.6) 和 transform: scale(1.3) 模拟晕开。但注意：blur() 是均值模糊，没有径向衰减特性；且无法响应鼠标位置实时变化；Safari 对多层 filter 嵌套支持差，可能直接失效。
立即学习“前端免费学习笔记（深入）”；
- 必须用
radial-gradient而非box-shadow，后者边缘生硬 - 加
backdrop-filter: blur(1px)会让背景透出，反而削弱光晕感 - 导出为 PNG 时，CSS 光晕会变成普通模糊图，失去可调性
