HTML5图片光晕效果制作教程

本文深入解析了HTML5中实现真实镜头光晕特效的核心技术路径，明确指出纯CSS无法胜任动态、可调的光学模拟，而Canvas才是可靠方案——关键在于结合径向渐变构建光斑层次、利用globalCompositeOperation='lighter'实现亮度叠加以还原过曝效果，并通过离屏预渲染、局部重绘和硬件加速等技巧突破移动端性能瓶颈；文章不仅拆解主光斑、晕环、星芒等组件的手动绘制逻辑，更一针见血地揭示了光晕的本质：不是“画亮”，而是精准控制光的叠加逻辑与空间衰减，避开合成模式误用、设备兼容陷阱和CSS替代误区，为开发者提供了一套兼顾视觉真实感与运行效率的实战指南。

用 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 快速实现近似效果：给一个