javascript - 分层 Canvas 元素

Question

我正在制作一个 pototype HMTL5 Canvas 动画，该动画将导出到 Quicktime。

我有一个动态生成的背景，上面有动态屏蔽的元素。

我可以获取要制作的背景，并将其作为逐帧动画(png 序列)导出到服务器，然后使用 FFMPEG 将动画编译为 Quicktime。这个概念正在发挥作用。

但是，每当我尝试将动态 mask 元素放在背景之上时，背景也会受到 mask 的影响。

目前我正在进行绘制操作

1. 绘制背景元素1
2. 绘制背景元素2
3. 绘制前景元素蒙版
4. 切换到源输入模式
5. 绘制前景元素填充
6. 恢复到源模式

我显然使用了错误的源模式，但我不确定是否可以做我想做的事情(有一个掩码影响其正下方的元素，但不会影响其下方的元素)。

我能想到的最简单的解决方案是仅将 2 个 Canvas 对象叠加在一起...但是我不确定如何将 2 个 Canvas 组合成单个图像以进行快速导出。

感谢您的帮助

Answer 1

context.drawImage 方法将接受另一个 Canvas 作为图像源。

因此，如果您想将所有 Canvas “展平”为单个 Canvas :

yourMainContext.drawImage(yourOverlayCanvasElement,0,0);