处理多个 canvas 上下文的解决方案
Solution for handling multiple canvas contexts
我正在构建一个图形 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 个上下文并尝试从头开始实现库在我自己那里实现的所有功能？我还有哪些其他选择？
我的标准是性能、可扩展性和稳健性。
谢谢
1 个 canvas 上不能有 2 个不同的上下文。
解决方案：
多个离屏canvas然后将它们绘制成一个可见的canvas
使用CSS在屏幕上重叠多个canvases
示例：http://webglfundamentals.org/webgl/lessons/webgl-text-canvas2d.html
至于分享 canvases，我怀疑这是否有效。每个图书馆都希望 canvas 处于特定状态。您可以使用 ctx.save() & ctx.restore() 保存和恢复 2d canvas 的所有状态，但是保存和恢复 WebGL 的所有状态将是一个巨大的开销。
我正在构建一个图形 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 个上下文并尝试从头开始实现库在我自己那里实现的所有功能？我还有哪些其他选择？
我的标准是性能、可扩展性和稳健性。
谢谢
1 个 canvas 上不能有 2 个不同的上下文。
解决方案：
多个离屏canvas然后将它们绘制成一个可见的canvas
使用CSS在屏幕上重叠多个canvases
示例：http://webglfundamentals.org/webgl/lessons/webgl-text-canvas2d.html
至于分享 canvases，我怀疑这是否有效。每个图书馆都希望 canvas 处于特定状态。您可以使用 ctx.save() & ctx.restore() 保存和恢复 2d canvas 的所有状态，但是保存和恢复 WebGL 的所有状态将是一个巨大的开销。