我们正面临着以下挑战：我们正在创建一个行为实验库，它们都需要能够显示随机形状以及显示形式。 对于形状绘制部分，我们使用pixi.js，即使我们知道它也可以使用canvas2D，我们更喜欢使用WebGL作为渲染引擎，它使用画布的3D上下文。但是Pixi并没有真正能够在画布上绘制表单元素，因此我们决定使用Zebra/Zebkit，但斑马只能绘制到2d上下文。
根据许多消息来源，在画布初始化之后，不可能在单个画布上同时使用2D和3D上下文，或者从2D和3D上下文切换（反之亦然）。因此，我们决定创建2个独立的画布，一个用于与Pixi.js一起使用的3D上下文，另一个用于与Zebra / zebkit一起使用的2D上下文。必要时，我们通过显示一个并隐藏另一个来切换画布。
当画布集成在网页中时效果很好，但是当我们想要全屏显示实验时效果不佳。在全屏幕中从一个画布切换到另一个画布是非常困难的，因为当时只能选择一个DOM元素来全屏显示，当你开始隐藏全屏元素以显示另一个时，会发生奇怪的事情。我的问题是：解决这个问题的最佳方法是什么？我已经有几个想法了：
将两个画布放在容器div中，并显示此容器全屏而不是画布本身。我不知道这是否可行，或者与直接在全屏显示画布相比，这会产生任何负面影响。
将mibkit画布放在pixi画布上，确保它位于叠加项的顶部，如How do I make a DIV visible on top of an HTML5 fullscreen video?中所示。这种情况看起来非常糟糕，我闻到了各种浏览器之间的不一致问题。
使用How do I make a DIV visible on top of an HTML5 fullscreen video?中描述的方法在pixi画布上呈现普通的HTML表单元素。我预测会解决一些分辨率/渲染问题，因为你没有像使用画布项那样控制像素光栅。