Question

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

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

你有什么想法可以让我的效果足够快吗？（从最大模糊到非模糊约1秒）

谢谢，加布里埃尔

Answer 1

我不是这方面的专家，但是有些非常明显的事情会浮现在脑海中：

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

方法2：缓存。模糊处理的时间通常会随着模糊半径的增长而增长。假设你的动画中有20帧。如果您可以缓存第5,10,15和20帧（不模糊的图像），那么您可以从半径较小的模糊5获得帧1-4，并且您将获得第5帧免费，然后您可以获得帧6- 9来自模糊10，半径小，你将获得第10帧免费，等等。

方法3：粗糙模糊的插值/混合。混合两个图像应该比模糊一个图像更快。如果你的动画是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;
}

模糊效果 - html5画布

2 个答案: