javascript - 具有透明背景的html Canvas 运动模糊

Question

我刚刚使用便宜的运动模糊创建了一个奇特的 Canvas 效果

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

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

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

Answer 1

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

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“复制”将最后一帧复制到缓冲区以将缓冲区清除为前一帧的半透明版本。