当前位置：首页 > JavaScript

js实现模糊效果

2026-03-16 05:55:11JavaScript

使用CSS滤镜实现模糊效果

在JavaScript中，可以通过修改元素的CSS filter属性来实现模糊效果。blur()函数接受一个参数，表示模糊半径，值越大越模糊。

const element = document.getElementById('target');
element.style.filter = 'blur(5px)';

动态调整模糊程度可以通过改变参数值实现：

js实现模糊效果

let blurAmount = 0;
function applyBlur() {
    blurAmount += 1;
    element.style.filter = `blur(${blurAmount}px)`;
}

使用Canvas实现高级模糊

Canvas的getImageData和putImageData方法可以处理像素数据，结合模糊算法实现更复杂的模糊效果：

function applyCanvasBlur(canvas, radius) {
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    // 实现高斯模糊算法处理imageData.data
    ctx.putImageData(imageData, 0, 0);
}

使用第三方库实现高性能模糊

StackBlur是一个轻量级的JavaScript模糊库，性能优于纯CSS实现：

js实现模糊效果

// 引入StackBlur库后
stackBlurImage('target-image', 0, 0, width, height, radius);

SVG滤镜实现跨浏览器模糊

通过创建SVG滤镜并应用到HTML元素上：

<svg>
  <filter id="blur-effect">
    <feGaussianBlur stdDeviation="3"/>
  </filter>
</svg>

<script>
  document.getElementById('target').style.filter = 'url(#blur-effect)';
</script>

动态模糊与动画结合

使用requestAnimationFrame实现平滑的模糊动画：

function animateBlur(element, targetBlur, duration) {
    const start = performance.now();
    function update(time) {
        const elapsed = time - start;
        const progress = Math.min(elapsed / duration, 1);
        const currentBlur = progress * targetBlur;
        element.style.filter = `blur(${currentBlur}px)`;
        if (progress < 1) requestAnimationFrame(update);
    }
    requestAnimationFrame(update);
}