模糊显示效果-html5画布

Question

我想创建一个模糊显示效果，如：http://www.flasheff.com/patternsshowcase/（FESBlur）。

我试过用http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html使用setInterval并更改每个"帧"上效果的半径，但如果我将间隔延迟设置为较低的值（提高效果的速度），它就不会平滑运行（我认为这是因为它使用imageData，并更改每个像素的值）。

你知道我怎样才能达到这样的效果，跑得足够快吗？（从最大模糊到非模糊约1秒）

谢谢，Gabriel

Answer 1

我不是这方面的专家，但我想到了一些非常明显的事情：

方法1：缓冲缓冲可能是阻止口吃的唯一最有效的方法。如果可以在实际输出动画之前将动画的启动延迟0.25秒，则可能会在动画开始之前完成一半的计算。

方法2：缓存处理模糊所需的时间通常随着模糊半径的增大而增大。假设您的动画中有20帧。如果你可以缓存第5帧、第10帧、第15帧和第20帧（未模糊图像），那么你可以从小半径的模糊5中获得第1-4帧，你可以免费获得第5帧，然后你可以从半径小的模糊10中获得第6-9帧，你将免费获得第10帧，以此类推

方法3：粗Blurs的插值/混合混合两个图像应该比模糊一个图像更快。如果将动画制作为21帧（1-21），则应该能够计算第1帧、第5帧、第9帧、第13帧、第17帧和第21帧。这些帧是自由的，你可以通过混合它们来获得其他帧：帧2（F2）将是75%的F1和25%的F5，F3将是50%的F1和50%的F5，依此类推

---

我的猜测是，这需要你相当多的修修补补。这些都不能通过简单地将一两个参数更改为一些幻数来解决问题。

然而，要意识到这一点：javascript并不能真正选择何时会引起处理器的注意，也不在处理器的优先级列表中。如果处理器决定休假1/10秒，你可能无法阻止这种口吃。

Answer 2

使用requestAnimFrame而不是setInterval。有关的更多信息http://paulirish.com/2011/requestanimationframe-for-smart-animating/

我在我的FF5上测试了更快的模糊减少，它似乎表现得很好。

(function animloop(){
  blurImage();
  requestAnimFrame(animloop);
})();
function blurImage(){
    stackBlurImage( "image1", "output", amount, true );
    amount=amount-4;
}