画布模糊背景

Question

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

我想将它用于固定背景的图像，因此我可以将相同的非模糊图像放在顶部，同时具有可更改的页面，在更换图像时更改设计。

我知道我可以使用CSS3过滤器，但它不适用于Firefox，这种模糊的大图像的性能很糟糕......

谢谢！

Answer 1

“我知道我可以使用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不喜欢它...）