模糊效果 - html5画布 [英] Blur show effect - html5 canvas

问题描述

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

I want to create a blur show effect like : http://www.flasheff.com/patternsshowcase/ (FESBlur).

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

I've tried to use http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html using setInterval and changing the radius of the effect on each "frame", but if I set the interval delay to a lower value(increase the effect's speed), it doesn't runs smooth ( I think it's beacuse it uses imageData, and changes the value of every pixel).

你有没有想想我怎么能让这种效果足够快跑？ （从最大模糊到非模糊约1秒）

Do you have any ideea about how I could make that effect to run fast enough? (about 1 second from max blur to non-blur)

谢谢，
加布里埃尔

Thanks, Gabriel

推荐答案

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

I'm no expert at any of this, but some very obvious things come to mind:

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

Method 1: Buffering. Buffering is probably the single most effective way to stop stutters. If you could delay the initiation of the animation by .25 seconds before actually outputting it, you could probably get half of the calculations done before the animation even starts.

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

Method 2: Caching. The time that a blur takes to process usually grows as the radius of the blur grows. Let's say you have 20 frames in your animation. If you can cache frame 5, 10, 15, and 20 (unblurred image) then you can get frames 1-4 from blurring 5 with a small radius, and you'll get frame 5 for free, then you can get frames 6-9 from blurring 10 with a small radius, and you'll get frame 10 for free, and so on.

方法3：粗糙模糊的插值/混合。混合两张图片应该比模糊一张图片更快。如果你的动画是21帧（1-21），那么你应该能够计算第1,5,9,13,17和21帧。这些帧是免费的，你可以通过混合它们来获得其他帧：第2帧（F2）将是75％F1和25％F5，F3将是50％F1和50％F5，依此类推。

Method 3: Interpolation/Blending of Coarse Blurs. Blending two images should be quicker than blurring one image. If you make your animation 21 frames (1-21), then you should be able to calculate frames 1, 5, 9, 13, 17, and 21. Those frames would be free, and you'd the other frames by blending them: frame 2 (F2) would be 75% F1 and 25% F5, F3 would be 50% F1 and 50% F5, and so on.

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

My guess is that this would take a decent amount of tinkering on your part. None of these are going to fix your problem by simply changing a parameter or two to some magic numbers.

实现这一点，但是：javascript并不是真正的选择和选择它何时会或不会引起处理器的注意，并且它在处理器的优先级列表中并不是很高。如果处理器决定休假1/10秒，你可能无法阻止口吃。

Realize this, however: javascript doesn't really get to pick and choose when it will or will not get the attention of the processor, and it's not exactly high on the processor's list of priorities. If the processor decides to go on vacation for 1/10th of a second, there's probably nothing that you can do to stop the stutter.

这篇关于模糊效果 - html5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！