html帆布运动模糊与透明背景 [英] html canvas motion blur with transparent background

问题描述

我刚刚使用便宜的动态模糊创建了一个花哨的画布效果。

  ctx.fillStyle =rgba（255,255,255,0.2） ; 
 ctx.fillRect（0,0，canvas.width，canvas.height）; 
  

现在我想做同样的，但透明的背景。有什么办法做这样的事情吗？我在玩globalAlpha，但这可能是一个错误的方式。

PS：Google今天不喜欢我

globalAlpha 和两个不同的画布对象创建一个类似这样的效果：一个用于前景，一个为背景。例如，使用以下canvas元素：

 < canvas id =bgwidth =256height =256 >< / canvas> 
< canvas id =fgwidth =256height =256>< / canvas> 
 

您可以复制绘制背景纹理和前景模糊复制的运动，如：

  bg.globalAlpha = 0.1; 
 bg.fillStyle = bgPattern; 
 bg.fillRect（0，0，bgCanvas.width，bgCanvas.height）; 
 
 bg.globalAlpha = 0.3; 
 bg.drawImage（fgCanvas，0，0）; 
  

这里是 jsFiddle示例。

OP询问如何使用HTML背景。由于你不能保留背景的副本，你必须保持以前的帧的副本，并以各种帧的形式绘制所有的帧。怀旧：旧的 3dfx Voodoo 5 视频卡具有称为t-buffer的硬件功能，

这里是一个 jsFiddle示例。这与上一种方法没有什么不同。

I just created a fancy canvas effect using cheap motion blur

ctx.fillStyle = "rgba(255,255,255,0.2)";
ctx.fillRect(0,0,canvas.width,canvas.height);

Now i want to do the same, but with transparent background. Is there any way to do something like that? I'm playing with globalAlpha, but this is probably a wrong way.

PS: Google really don't like me today

解决方案

You can create an effect like this by using globalAlpha and two different canvas objects: one for the foreground, and one for the background. For example, with the following canvas elements:

<canvas id="bg" width="256" height="256"></canvas>
<canvas id="fg" width="256" height="256"></canvas>

You could copy draw both a background texture and a motion blurred copied of foreground like so:

bg.globalAlpha = 0.1;
bg.fillStyle = bgPattern;
bg.fillRect(0, 0, bgCanvas.width, bgCanvas.height);

bg.globalAlpha = 0.3;
bg.drawImage(fgCanvas, 0, 0);

Here is a jsFiddle example of this.

OP asked how to do this with an HTML background. Since you can't keep a copy of the background, you have to hold onto copies of previous frames, and draw all of them at various alphas each frame. Nostalgia: the old 3dfx Voodoo 5 video card had a hardware feature called a "t-buffer", which basically let you do this technique with hardware acceleration.

Here is a jsFiddle example of that style. This is nowhere near as performant as the previous method, though.

这篇关于html帆布运动模糊与透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！