H5中无法用ctx.filter实现“梦幻光斑球”，须用createRadialGradient手绘球体+多层模糊光晕+requestAnimationFrame驱动呼吸动画。
直接说结论：H5 中无法用 ctx.filter 实现“梦幻光斑球”，因为 Canvas 2D 的 filter 只支持 CSS 滤镜子集（如 blur()、brightness()），不支持径向发光、动态闪烁或球体立体感建模。真正可行的方案是——用 createRadialGradient 手动绘制带明暗过渡的球体，再叠加多层半透明模糊光晕，最后用 requestAnimationFrame 驱动呼吸节奏。
1. 用径向渐变画出有体积感的光斑球
这不是简单画个圆，而是模拟点光源照射下的高光-亮部-暗部衰减：
- 起始圆设为
r0 = 0（理想点光源），位置偏左上，形成自然高光 - 结束圆圆心右下偏移（比如
x1 = x0 + 15, y1 = y0 + 15），半径设为球体直径的 1.2 倍，控制柔边范围 - 颜色停靠点分三层：0% 处用纯白（#fff）做高光，55% 处用主体色降饱和（如 hsl(45, 60%, 70%)），100% 处用深灰+透明（rgba(30,30,50,0.3)）强化球体轮廓
- 务必先调用
ctx.beginPath() → ctx.arc() → ctx.fill()，渐变才生效；调试时可用strokeRect画出两圆辅助定位
2. 叠加多层模糊光晕增强梦幻感
单层渐变太“干”，真实光斑有能量弥散。不用 CSS blur，而用 Canvas 手绘多层同心圆模拟软边：
- 画 4 层同心圆：半径分别为
r、r×1.3、r×1.7、r×2.2 - 每层用独立
createRadialGradient，内圆 alpha=1，外圆 alpha=0；颜色从暖白（#fff9f0）渐变到完全透明 - 各层
globalAlpha设为0.7、0.45、0.22、0.1，叠加后自动产生辉光层次 - 所有层统一用
globalCompositeOperation = 'lighter'，让亮度相加而非覆盖，更接近光学过曝
3. 用 requestAnimationFrame 实现呼吸式闪烁
梦幻感来自节奏变化，不是匀速明暗，而是缓入缓出的“呼吸”：
- 用
const t = Date.now() * 0.001获取时间戳，再算breath = (Math.sin(t * 0.6) + 1) / 2得 [0,1] 基础值 - 做二次平滑：
breath = breath * breath（缓入）或breath = 1 - Math.abs(breath * 2 - 1)（缓入缓出） - 用它同时驱动：最内层球半径（±15%）、高光 alpha（0.8→1.0）、最外层光晕扩散强度（r×2.0→r×2.4）
- 每帧先
clearRect，再重绘原图（如有）、球体、光晕层，避免残影
4. 进阶提示：避免常见翻车点
这些细节决定效果是否“真梦幻”：
- 别在 canvas 上直接套 CSS filter: blur()——它会模糊整个画布，破坏光斑边缘锐度和层次
- 不要用 globalAlpha 控制整层透明度——会导致所有光晕同步变淡，失去“中心亮、边缘融”的物理感；alpha 必须内嵌在每层渐变中
- 移动端注意性能：若帧率下降，可将光晕层数减至 3 层，或把基础球体预渲染到 OffscreenCanvas 缓存，主线程只做合成
- 深色背景更出效果：光斑在黑底上才显通透；若页面支持深色模式，可微调光晕色相（如从暖白→浅金）提升对比
