html - 模糊显示效果-html5 canvas

Question

我想创建一个模糊显示效果，如:http://www.flasheff.com/patternsshowcase/ (FES 模糊)。

我试过使用 http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html使用 setInterval 并更改每个“帧”上效果的半径，但如果我将间隔延迟设置为较低的值(增加效果的速度)，它运行不流畅(我认为这是因为它使用 imageData，并更改每个像素的值)。

关于我如何使该效果运行得足够快，您有什么想法吗？ (从最大模糊到非模糊大约需要 1 秒)

谢谢，加布里埃尔

Answer 1

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

方法 1:缓冲。缓冲可能是消除卡顿的最有效方法。如果您可以在实际输出动画之前将动画的启动延迟 0.25 秒，那么您甚至可以在动画开始之前完成一半的计算。

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

方法 3:粗略模糊的插值/混合。混合两个图像应该比模糊一个图像更快。如果您制作 2​​1 帧 (1-21) 的动画，那么您应该能够计算第 1、5、9、13、17 和 21 帧。这些帧是免费的，您可以通过混合其他帧: 第 2 帧 (F2) 将是 75% F1 和 25% F5，F3 将是 50% F1 和 50% F5，依此类推。

---

我的猜测是，这需要您进行大量修改。这些都不会通过简单地将一两个参数更改为一些神奇的数字来解决您的问题。

然而，要意识到这一点:javascript 并不能真正地选择它何时会或不会引起处理器的注意，而且它在处理器的优先级列表中也不是很靠前。如果处理器决定休假 1/10 秒，您可能无法采取任何措施来阻止卡顿。