ctx.filter无法实现光斑闪烁效果，因其仅支持CSS filter子集；需用createRadialGradient()动态绘制+requestAnimationFrame控制透明度与半径变化来模拟，或升级至WebGL/OffscreenCanvas实现高质量效果。
HTML5 Canvas 里用 ctx.filter 做不了光斑闪烁
直接说结论：ctx.filter 只支持 CSS filter 函数的子集（如 blur()、brightness()），不支持自定义光斑、闪烁、径向发光等效果。所谓“HTML5 滤镜加光斑闪烁”，实际必须绕开 filter，改用 Canvas 2D 手动绘制或 WebGL 实现。
用 createRadialGradient() 模拟光斑 + requestAnimationFrame 控制闪烁
这是最轻量、兼容性最好（支持所有现代浏览器）的方案：在 Canvas 上每帧动态画一个透明度/半径随时间变化的径向渐变圆，叠加在目标图像上。
-
createRadialGradient(x, y, 0, x, y, radius)定义光斑中心和扩散范围 - 用
Math.sin(Date.now() * 0.002) * 0.3 + 0.7控制透明度，在 0.4–1.0 之间周期波动 - 半径可同步抖动：
baseRadius * (0.8 + Math.abs(Math.sin(Date.now() * 0.003)) * 0.4) - 记得每次重绘前用
ctx.clearRect(0, 0, canvas.width, canvas.height)清底，再 drawImage 原图，最后叠加光斑
CSS filter: drop-shadow() 配合动画只能做静态边缘辉光
有人试过给 Canvas 元素本身加 drop-shadow(0 0 20px #fff) 再用 @keyframes 动画 opacity，但这只会让整个画布泛白边，无法形成「中心光斑」或「随机闪烁点」。它作用于整个元素盒，不是像素级控制，且无法响应鼠标位置或图像内容。
- 不适用于需要聚焦某区域（如人脸高光、按钮悬停热点）的场景
- 闪烁节奏生硬，因为 CSS 动画帧率受限于主线程，Canvas 手绘可精准控制 timing 和 easing
- 移动端容易触发渲染层提升但无实质加速，反而增加内存压力
真要高质量光斑？得用 WebGL 或 OffscreenCanvas 预渲染
如果光斑需带噪点、色散、镜头晕染（lens flare），Canvas 2D 性能会明显下降。此时应考虑：
立即学习“前端免费学习笔记（深入）”；
- 用
OffscreenCanvas在 worker 里预生成几帧光斑贴图，主线程只做合成 - WebGL 方案：写简单 fragment shader，用
vec2 uv计算到中心距离，叠加sin(time)调制亮度 —— 这才是“滤镜级”光斑，但需额外引入 Three.js 或原生 WebGL 封装 - 注意：Safari 对
OffscreenCanvas支持仍有限（iOS 16.4+ 才较稳），别默认开启
光斑闪烁的本质是时空域上的亮度扰动，Canvas 2D 能做，但“怎么扰动”——频率、幅度、空间分布——全靠你手动建模；没人替你封装成一个 glitterFilter() 函数。
