javascript - 在 Canvas 上制作动画时淡出 Canvas 上传递的帧的最有效方法是什么？

Question

我正在使用 HTML Canvas 制作类似于可视化工具的东西。在绘制每一帧时，我想获取当前 Canvas 数据并将其淡出。

我发现获得这种效果的几种方法是:

1. 在整个 Canvas 上绘制背景颜色的半透明框。实际上并没有淡出内容，所以 Canvas 后面的任何东西都被覆盖了。这已经足够快了，而且它可以完成的事实证明浏览器有能力进行所有必要的计算。

2. 使用 canvas.getImageData() 处理图像数据，然后使用 canvas.putImageData() 重新应用它。这样做非常低效，将大量本应是 native 逻辑的内容放入 js 中。对于任何实际使用来说太慢了。

3. 使用 canvas.toDataUrl() 生成图像 (png/jpg) 并使用 ctx.globalOpacity 重绘具有一定透明度的图像。将 Canvas 数据转换为图像并返回的步骤非常昂贵(压缩、 header 等)。对于任何实际使用来说太慢了。

如何在 Canvas 上淡出我传递的帧，同时在顶部设置新帧的动画？

我检查了这些:

Canvas Fade Out Particles - 非常相似的问题，答案提出了一个不适用的解决方案来解决我的问题(使用 Sprite 并重绘整个 Canvas )

FadeIn FadeOut in Html5 canvas - 问题是关于在 Canvas 上淡入/淡出图像，而不是 Canvas 内容本身。

编辑:我想我可能找到了解决方案: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

Answer 1

合成成功了。这是淡出阶段:

// painter = canvas.getContext("2d")
painter.save();
painter.globalAlpha = 1;
painter.globalCompositeOperation = "destination-in";
const fadeOutAmount = 0.99;
painter.fillStyle = "rgba(0, 0, 0, fadeOutAmount)";
painter.fillRect(0, 0, canvas.width, canvas.height);
painter.restore();

通过使用“destination-in”复合模式来绘制形状，新的形状不透明度会应用于背景。

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

示例(also on CodePen):

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;

ctx.fillStyle = "rgb(250, 0, 0)";
// rectangle is filled with solid red
ctx.fillRect(50, 50, 100, 100);

ctx.globalCompositeOperation = "destination-in";
ctx.fillStyle = "rgba(250, 250, 250, 0.5)";
ctx.fillRect(75, 75, 100, 100);
// after the line above, only the part where the two squares show is overlappped, and it only has the opacity of the latter square.  Doing this many frames in a row fully fades out the background.
ctx.globalCompositeOperation = "source-over"

document.getElementById("test").appendChild(canvas);

<div id="test"></div>