分层 Canvas 个元素

Layering Canvas elements

我正在制作将导出到 quicktime 的 pototype HMTL5 canvas 动画。

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

我可以获取要制作的背景，并将其作为逐帧动画（png 序列）导出到服务器，然后使用 FFMPEG 将动画编译成 quicktime。这个概念很有效。

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

目前我的抽奖操作进行中

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

我显然使用了错误的源模式，但我不确定是否可以做我想做的事（有一个遮罩影响它下面的元素，但不影响下面的元素）。

我能想到的最简单的解决方案是将第 2 层 canvas 对象放在彼此之上......但是我不确定如何将 2 canvases 组合成用于 quicktime 导出的单个图像。

感谢帮助

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

因此，如果您想 "flatten" 将所有 canvas 合并为一个 canvas：

yourMainContext.drawImage(yourOverlayCanvasElement,0,0);