html - 帆布模糊背景

Question

我是一个关于画布的新手，我已经搜索并尝试了很多，但从未找到合适的解决方案来使用这个：http ://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

我想将它与固定背景的图像一起使用，因此我可以将相同的非模糊图像放在顶部，同时拥有一个可更改的页面，在交换图像时改变设计。

我知道我可以为此使用 CSS3 过滤器，但它在 Firefox 上不起作用，而且这种模糊的大图像的性能很糟糕......

谢谢！

score 1 · Accepted Answer

“我知道我可以为此使用 CSS3 过滤器，但它在 Firefox 上不起作用......”

Firefox 可以做 CSS 模糊：

首先，在网页中包含一个包含所需模糊的 SVG 文件

<svg xmlns:svg="http://www.w3.org/2000/svg">
    <filter id="gaussian">
        <feGaussianBlur id="myBlur" stdDeviation="5" />
    </filter>
</svg>

接下来，以正常方式获取对 canvas 元素的引用，例如：

var canvas = document.getElementById('myCanvas');

...并将过滤器应用于它：

canvas.style.webkitFilter = 'url(#gaussian)';
canvas.style.filter = 'url(#gaussian)';

要更改模糊值，您需要处理高斯模糊元素本身：

var blurFilter = document.getElementById('myBlur');

使用 setStdDeviation(stdDeviationX, stdDeviationY) 方法来改变模糊。两个参数都是数字，而不是字符串：

blurFilter.setStdDeviation(5, 5);

（在最新版本的 Firefox 和 Chrome 中似乎可以正常工作 - 尽管当模糊值设置为 0 时 Chrome 不喜欢它......）

1 回答 1