Canvas 2D 的 context.filter = 'blur(8px)' 是最直接实现柔焦效果的方法，本质为高斯模糊，仅对后续绘制生效，建议模糊值设为4px–12px，超16px易卡顿。
Canvas 2D 上用 blur() 实现柔焦效果最直接
HTML5 本身没有叫“柔焦滤镜”的内置 API，但 Canvas 2D 上的 context.filter = 'blur(8px)' 是最接近、也最易上手的方案。它本质是高斯模糊，视觉上就是柔焦感。
注意：这个 filter 属性只对后续绘制生效（比如 drawImage()），不作用于已画好的内容，也不能直接加在
- 值设太小（如
blur(1px)）几乎看不出变化；建议从4px起试，常用范围是4px–12px - 值超过
16px后性能明显下降，尤其在低端移动设备上容易卡顿 - 它和 CSS 的
filter: blur()渲染结果基本一致，但 Canvas 版可控粒度更高（可逐帧、局部应用）
用 getImageData() + 自定义卷积做更精细柔焦控制
如果需要避开边缘过糊、保留主体轮廓，或者想模拟镜头散景（非均匀模糊），就得绕开 blur()，手动处理像素。核心是用 getImageData() 拿到原始像素，再用二维高斯核做卷积运算。
关键点在于：标准高斯模糊会把所有区域一视同仁地糊掉，而真实柔焦常是中心清晰、边缘渐变模糊。这时候可以结合 alpha 通道或深度图做掩码，只对特定区域应用强模糊。
立即学习“前端免费学习笔记（深入）”；
- 简单实现可用 3×3 或 5×5 高斯核，避免用大核（如 15×15）导致计算爆炸
- 别直接在主线程跑大图全量卷积，1024×768 图片就可能卡顿 200ms+；优先用
OffscreenCanvas或 Web Worker -
putImageData()写回前记得检查data是否被跨域污染（否则抛SecurityError）
CSS filter: blur() 不能直接用于视频流柔焦？其实可以，但有坑
对 或 元素加 style="filter: blur(6px)" 确实能出柔焦效果，但它属于合成层后处理，无法区分前景/背景，也不支持动态强度调节（除非 JS 动态改 style）。
更大的问题是：某些安卓 WebView 和旧版 Safari 会把 blur() 应用到整个页面渲染树，导致文字、UI 全部发虚。不是 bug，是它们把 filter 当成了全局合成开关。
- 稳妥做法是把视频画到
，再对 canvas 元素加 CSS blur —— 这样影响范围可控 - 若需实时调节（比如滑块控制模糊度），用
requestAnimationFrame改canvas.style.filter比频繁重绘 canvas 更轻量 - 务必测试 iOS 15.4 以下版本，它们对
blur()的硬件加速支持不一致，可能出现闪烁或跳帧
WebGL 方案适合高性能柔焦，但复杂度陡增
真要跑高清视频 + 实时柔焦 + 多层混合（比如人像抠图后只柔化背景），Canvas 2D 就力不从心了。这时得上 WebGL，用 fragment shader 写自定义模糊函数。
典型做法是：先横向模糊一次纹理，再纵向模糊一次（分离卷积），比二维卷积快 2–3 倍。但你要自己管理着色器、纹理上传、帧缓冲——调试成本远高于其他方案。
- 别从零写高斯权重，用预计算的 1D 权重数组（如 [0.227, 0.316, 0.227]）足够应付多数柔焦需求
- 移动端注意纹理尺寸必须是 2 的幂（如 1024×1024），否则部分 GPU 驱动会静默失败
- WebGL 柔焦真正难的不是模糊本身，而是如何把摄像头流（
MediaStream）作为纹理输入——涉及texImage2D()+UNPACK_FLIP_Y_WEBGL等细节，漏一个就会画面倒置或全黑
filter 就够了。剩下那 10%，往往不是技术选型问题，而是没想清楚“柔焦”到底要服务于什么——是弱化背景突出人脸？还是模拟老电影质感？目标模糊，方案才容易跑偏。 
