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

【问题标题】：Solution for handling multiple canvas contexts处理多个画布上下文的解决方案
【发布时间】：2016-11-04 14:09:14
【问题描述】：

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

问题是我的目标是使用一些需要画布上下文以及在某些情况下需要不同类型上下文的库（three.js、sketch.js 和其他）。其他人需要“2d”上下文，其他人需要“webgl”上下文等。

当我希望最终有一个画布进行流式传输时，如何处理在画布上绘制的所有这些库的可靠方法是什么？

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

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

但稍后我可能还有其他需要上下文的库。我是否应该只有 1 个画布和 1 个上下文，并尝试从头开始实现库自己在那里实现的所有功能？我还有什么其他选择？

我的标准是性能、可扩展性和稳健性。

谢谢

【问题讨论】：

我认为拥有不同的画布，然后获取所有上下文并在主画布上绘制最终图像是最好的解决方案。
@JonasGrumann 还有其他我应该考虑的方法/问题吗？
我不确定，我不是专家。如果你有很多不同的画布，这种方法的唯一缺点就是性能。也许设置一个测试场景，创建 100 个不同的画布，获取所有这些画布的上下文并将它们绘制在一个最终画布上，看看结果。我想不出更好的方法
两个隐藏的画布不够吗？需要2d 上下文的所有库共享一个画布。另一个由所有需要 webgl 上下文的库共享。
@geoji 我已经想到了，但我认为有一个问题：每个库都有自己的，有时是复杂的渲染函数。同步这些可能很难甚至不可能。不过我可能错了。

【解决方案1】：

您不能在 1 个画布上拥有 2 个不同的上下文。

解决方案：

多个屏幕外画布，然后将它们绘制到单个可见画布中
使用 CSS 在屏幕画布上重叠多个

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

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

【讨论】：