分层画布元素

Question

我正在制作一个将导出为quicktime的pototype HMTL5画布动画。

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

我可以获得背景，并将其作为逐帧动画（png序列）导出到服务器，然后使用FFMPEG将动画编译为quicktime。这个概念正在发挥作用。

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

目前我已经进行了抽奖操作

1. 绘制背景元素1
2. 绘制背景元素2
3. 绘制前景元素掩码
4. 切换到来源模式
5. 绘制前景元素填充
6. 恢复到资源过期模式

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

我能想到的最简单的解决方案就是将彼此叠加的第2层画布对象...但是我不确定如何将2幅画布合并为单个图像以进行快速导出。

感谢您的帮助

Answer 1

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

所以如果你想＆＃34;压扁＆＃34;所有画布都放在一个画布上：

yourMainContext.drawImage(yourOverlayCanvasElement,0,0);