javascript - 处理多个 Canvas 上下文的解决方案

Question

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

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

当我希望最终有一个 Canvas 来传输它时，如何处理在 Canvas 上绘制的所有这些库的可靠方法是什么？

现在，我为每个库创建一个隐藏 Canvas ，并有一个主渲染循环，我在其中调用:

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

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

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

谢谢

Answer 1

一张 Canvas 上不能有 2 个不同的上下文。

解决方案:

• 多个屏幕外 Canvas ，然后将它们绘制到单个可见 Canvas 中

• 使用 CSS 重叠屏幕上的多个 Canvas

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

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