处理多个画布上下文的解决方案

Question

我正在构建一个图形Web应用程序，我将在其中绘制一个元素并最终流式传输其内容。

问题是我的目标是使用一些需要画布上下文的库（three.js，sketch.js和其他），在某些情况下还需要不同类型的上下文。其他人需要＆＃39; 2d＆＃39;上下文和其他人需要＆＃39; webgl＆＃39;背景等。

当我想在最后使用一个画布来流式传输时，有什么方法可以处理在画布上绘制的所有这些lib？

现在我为每个库创建一个隐藏的画布，并在我调用的地方有一个主渲染循环：

masterCtx.drawImage(canv1, 0, 0);
masterCtx.drawImage(canv2, 0, 0);
//etc

但后来我可能还有其他需要上下文的库。我应该只有1个画布和1个上下文并尝试实现库从头开始实现的所有功能吗？我还有其他选择吗？

我的标准是性能，scalabilty和robustnes 。

谢谢

Answer 1

1张画布上不能有2个不同的上下文。

解决方案：

• 多个屏幕外画布，然后将它们绘制成一个可见的画布

• 使用CSS在屏幕画布上重叠多个

  示例：http://webglfundamentals.org/webgl/lessons/webgl-text-canvas2d.html

至于分享画布，我怀疑这会有效。每个库都希望画布处于特定状态。您可以使用ctx.save()＆amp;保存并恢复2d画布的所有状态。 ctx.restore()但保存和恢复WebGL的所有状态将是一个巨大的开销。