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

Solution for handling multiple canvas contexts

本文关键字：上下文 解决方案 处理      更新时间：2023-09-26

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

问题是我的目标是使用一些需要画布上下文的库(three.js, sketch.js等)，在某些情况下需要不同类型的上下文。其他需要'2d'上下文，其他需要'webgl'上下文等。

什么是一个可靠的方法，如何处理所有这些lib绘制在画布上，当我想有一个画布在结束流?

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

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

，但以后我可能也有其他库需要上下文。我应该只有一个画布和一个上下文，并尝试实现所有的功能，图书馆实现那里我自己从零开始?我还有别的选择吗?

我的标准是性能、可扩展性和鲁棒性。

谢谢

你不能在一张画布上有两个不同的上下文。

解决方案:

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

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

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

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