前端模糊实现那点事：CSS与Canvas的深度实践指南

一、模糊效果的视觉价值与实现场景

模糊效果是现代UI设计中提升层次感的重要手段，常见于背景虚化、聚焦提示、动态过渡等场景。例如，登录框背后的半透明模糊背景能突出主体内容，而图片的动态模糊可引导用户注意力。实现方式主要分为CSS原生方案与Canvas动态渲染两大类，选择时需综合考虑性能、兼容性与交互需求。

1.1 CSS滤镜方案：filter: blur()

CSS的filter属性提供了最便捷的模糊实现方式。其语法为：

.element {
  filter: blur(4px);
}

• 优势：代码简洁，无需JavaScript，硬件加速优化后性能较好。
• 限制：模糊半径超过10px时可能出现锯齿，且无法对部分子元素排除模糊。
• 兼容性：IE不支持，Edge 12+、Chrome 18+、Firefox 35+等现代浏览器均支持。

实践建议：

• 配合backdrop-filter实现背景模糊（需注意浏览器前缀）：

  .modal-bg {
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.3);
  }

• 避免在滚动容器中使用大半径模糊，防止卡顿。

二、Canvas动态模糊：高自由度与性能权衡

当需要动态调整模糊参数或处理复杂图形时，Canvas的像素级操作成为首选。其核心逻辑是通过获取图像数据、应用高斯模糊算法、重新绘制实现。

2.1 基础实现步骤

1. 绘制原始图像：

   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   const img = new Image();
   img.src = 'path/to/image.jpg';
   img.onload = () => {
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   };

2. 应用高斯模糊：
   手动实现高斯模糊需遍历像素点，计算邻域加权平均值。简化版示例：

   function applyBlur(radius = 3) {
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     const data = imageData.data;
     // 遍历每个像素，计算邻域平均值（简化版，实际需加权）
     for (let y = radius; y < canvas.height - radius; y++) {
       for (let x = radius; x < canvas.width - radius; x++) {
         let r = 0, g = 0, b = 0;
         for (let dy = -radius; dy <= radius; dy++) {
           for (let dx = -radius; dx <= radius; dx++) {
             const px = (y + dy) * canvas.width * 4 + (x + dx) * 4;
             r += data[px];
             g += data[px + 1];
             b += data[px + 2];
           }
         }
         const total = Math.pow(2 * radius + 1, 2);
         const idx = y * canvas.width * 4 + x * 4;
         data[idx] = r / total;
         data[idx + 1] = g / total;
         data[idx + 2] = b / total;
       }
     }
     ctx.putImageData(imageData, 0, 0);
   }

   • 优化方向：使用分离卷积（先水平后垂直）或WebGL加速。

2.2 性能优化策略

• 离屏渲染：将模糊结果缓存到另一个Canvas，避免重复计算。
• 降采样处理：先缩小图像尺寸模糊，再放大显示，减少计算量。
• Web Workers：将模糊计算移至后台线程，避免阻塞UI。

案例：某图片编辑工具通过Web Worker实现实时模糊，在i5处理器上处理1080p图像的耗时从800ms降至200ms。

三、SVG模糊：矢量图形的优雅方案

对于SVG图形，<feGaussianBlur>滤镜提供了无损的矢量模糊能力。

3.1 基本用法

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" fill="blue" filter="url(#blur)" />
</svg>

• 优势：缩放无损，适合图标和矢量图形。
• 参数调整：stdDeviation控制模糊强度，值越大越模糊。

3.2 动态控制

通过JavaScript修改stdDeviation实现交互效果：

const svg = document.querySelector('svg');
const blur = document.querySelector('#blur feGaussianBlur');
svg.addEventListener('mousemove', (e) => {
  const x = e.clientX / window.innerWidth * 10;
  blur.setAttribute('stdDeviation', x);
});

四、跨浏览器兼容与降级方案

1. CSS滤镜降级：
   使用@supports检测支持性：

   .element {
     opacity: 0.8; /* 默认降级效果 */
   }
   @supports (filter: blur(1px)) {
     .element {
       filter: blur(2px);
       opacity: 1;
     }
   }

2. Canvas兼容性处理：
   检测getImageData是否可用，若不可用则显示静态模糊图。

五、性能对比与选型建议

方案	适用场景	性能（1080p图像）	兼容性
CSS filter	静态背景、简单UI元素	快（硬件加速）	IE不支持
Canvas	动态模糊、复杂图形处理	中等（需优化）	全部浏览器
SVG滤镜	矢量图形、图标	快	全部浏览器

选型原则：

• 优先使用CSS方案，除非需要动态控制或处理复杂图形。
• 移动端慎用大半径模糊，避免引发重绘卡顿。
• 对性能敏感的场景，考虑服务端预处理模糊图。

六、未来趋势：CSS Houdini与WebGPU

1. CSS Houdini：
   通过Paint API自定义模糊效果，未来可能支持更精细的控制。
2. WebGPU：
   利用GPU并行计算能力实现实时高精度模糊，适合3D场景和游戏UI。

结语：前端模糊实现需平衡视觉效果与性能开销。从CSS的便捷到Canvas的灵活，再到SVG的矢量优势，开发者应根据场景选择合适方案，并持续关注新技术带来的优化空间。