Question

我刚刚使用便宜的运动模糊创建了一个精美的画布效果

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

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

PS：谷歌今天真的不喜欢我

Answer 1

这是一种更加性能友好的方式，它需要一个不可见的缓冲区和一个可见的画布。

buffer.save();
buffer.globalCompositeOperation = 'copy';
buffer.globalAlpha = 0.2;
buffer.drawImage(screen.canvas, 0, 0, screen.canvas.width, screen.canvas.height);
buffer.restore();

基本上你把你的objs绘制到缓冲区，它是非常快的，然后将它绘制到屏幕上。然后替换清除缓冲区，使用全局alpha将最后一帧复制到缓冲区，并使用globalCompositeOperation'copy'将缓冲区转换为前一帧的半透明版本。

Answer 2

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

<canvas id="bg" width="256" height="256"></canvas>
<canvas id="fg" width="256" height="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 example。

OP询问如何使用HTML背景执行此操作。由于您无法保留背景的副本，因此您必须保留先前帧的副本，并在每帧的不同alpha处绘制所有帧。怀旧：旧的3dfx Voodoo 5显卡有一个称为“t-buffer”的硬件功能，它基本上可以让你通过硬件加速来实现这项技术。

这是该风格的jsFiddle example。尽管如此，这远远不如前一种方法那么高。

Answer 3

您在示例中所做的是部分清除半透明颜色的屏幕，但实际上，您将始终“添加”到Alpha通道最多1（无透明度）。

要使用透明画布（这样你可以看到下面的内容）你应该减去alpha值而不是添加，但我不知道用可用工具做到这一点的方法，除了运行所有像素一个接一个地降低alpha值，但这确实很慢。

Answer 4

如果要跟踪屏幕上的实体，可以通过在鼠标移动时生成新实体然后将补间中的alpha级别设置为零来执行此操作。一旦它们达到零alpha，就从内存中删除实体。

这需要多次绘制，如果你把它调得太多，会减慢渲染速度。显然，双画布方法从渲染性能的角度来看是最简单和最便宜的，但它不允许您控制其他功能，例如使“粒子”移动不规律或将物理应用于它们！

html画布运动模糊与透明背景

4 个答案: