Canvas 2D 手动绘制+globalCompositeOperation='lighten'是最稳定可控的光晕方案；WebGL+UnrealBloomPass效果最佳但需Three.js基础；纯CSS仅适用于极简泛光。
Canvas 2D 上用 globalCompositeOperation 模拟光晕效果最可行
HTML5 原生不支持“镜头光晕”这类复杂滤镜，feGaussianBlur 和 feMerge，但兼容性差（Safari 对 feTurbulence 等支持弱）、性能低、且无法动态控制光源位置。实际项目中，Canvas 2D 手动绘制 + 合成是最稳定、可控的方式。
核心思路：在离屏 canvas 上画多个同心高斯模糊圆（或径向渐变），叠加不同 blend mode（如 lighten 或 screen），再贴回主画布。
-
globalCompositeOperation = 'lighten'能自然叠加亮区，避免过曝发灰 - 用
createRadialGradient替代多次fillRect+blur，减少 drawImage 调用次数，提升帧率 - 光源坐标需映射到 canvas 坐标系（注意
getBoundingClientRect()与offsetX/offsetY的差异）
WebGL 方案用 THREE.js + UnrealBloomPass 效果最接近真实镜头光晕
若页面已有 Three.js 基础，直接引入 EffectComposer 和 UnrealBloomPass 是目前最省事且质量最高的方案——它模拟了色散、晕影、星芒等光学特性，不是简单高斯叠加。
关键配置点：
立即学习“前端免费学习笔记（深入）”；
-
strength控制整体亮度增益（0.1–1.5 区间较安全，>2 易导致全屏泛白） -
threshold决定哪些像素参与发光（建议从0.8开始调，值越小，暗部也发光） - 必须确保渲染目标开启
alpha: true和antialias: true，否则边缘锯齿明显 - 移动端需检测
renderer.capabilities.isWebGL2Available()，降级到BloomPass（性能更好但无色散）
纯 CSS 滤镜只能做极简“泛光”，别指望模拟镜头物理特性
CSS filter: blur(20px) brightness(1.8) 只能对整个元素做后处理，无法指定光源中心、无法分层控制蓝/红偏移（色散）、无法响应鼠标移动。它适合按钮悬停微光效，但一旦用于视频或 Canvas 内容，会因重绘区域过大引发卡顿。
常见误用：
- 给
加filter→ Safari 下严重掉帧，iOS 16+ 才有基础硬件加速 - 用
drop-shadow()模拟光晕 → 只是单色阴影，完全偏离“镜头折射”本质 - 嵌套多层
filter: blur()→ 浏览器会合并为一次计算，不会增强效果，反而增加内存压力
OffscreenCanvas + transferToImageBitmap 是高性能动态光晕的关键
当光晕需随鼠标实时移动（比如交互式产品展示），主线程频繁重绘 canvas 会导致掉帧。把光晕生成逻辑移到 Web Worker，用 OffscreenCanvas 渲染，再通过 transferToImageBitmap 零拷贝传回主线程贴图，可稳定维持 60fps。
必须注意的坑：
- Worker 中不能访问
document或window，所有参数（canvas 尺寸、光源坐标、颜色）需通过postMessage传递 -
ImageBitmap不支持 alpha 预乘，若光晕含半透明边缘，需在 Worker 里手动做 premultiply 处理 - Chrome 92+ 支持 OffscreenCanvas 的
transferFromImageBitmap，但 Firefox 目前仅支持commit()方式，需降级兜底
真正难的不是画出一个光晕，而是让它的亮度衰减符合反平方律、边缘色散角度随光源强度变化、且不吞噬低端设备的帧率——这些细节几乎都得自己算，没有开箱即用的 magic number。
