切换画布上下文

假设我有一个 WebGL 画布（通过调用getContext("experimental-webgl")).

有没有办法稍后切换上下文以使用"2d" one ?

这样做的目的是在渲染过程中发生错误时显示类似调试 BSOD 的信息。

如果不可能，那么：

• 我可以在画布上嵌入一个 html 元素，并强制该元素与画布完全相同（即使最后一个元素已调整大小）吗？
• 我可以替换 dom 节点，并更新有关旧节点的每个引用以反映更改吗？

[edit]这是我当前的最小调用代码。 Canvas 是一个 DOM 节点，包含由 WebGL API 填充的画布，而回调是处理单个帧的函数。

function failure(cvs, e) {
    var ctx = cvs.getContext('2d'); // Fail here, returns `null' if cvs.getContext('webgl') has been called
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0, 0, cvs.width, cvs.height);
    ctx.fillStyle = 'rgb(255, 255, 255)';
    ctx.font = 'bold 12px sans-serif';
    ctx.fillText(e.toString(), 0, 0);
}

function foobar(canvas, callback) {
    try {
        callback();
    } catch (e) {
        failure(canvas, e);
        throw e;
    } finally {
        requestAnimationFrame(arguments.callee);
    }
}

根据规范，简短的回答几乎是否定的。

每个画布都有所谓的主要上下文。这是在画布上调用的第一个上下文。在画布上创建非主要上下文可能会在不同的浏览器上执行某些操作，但我永远不会依赖它。

相反，我会拥有第二个画布，它覆盖在第一个画布上，并保持相同的宽度和高度属性。然后我会隐藏一个并取消隐藏另一个（或者当您希望看到它时取消隐藏 2D）。

或者为了简单起见，只使用 PNG，位于也包含画布的 DIV 内部的中心。换句话说：

Div 容器具有黑色背景并容纳：

• PNG（居中）
• 3D画布

然后，当您想要显示错误 png 时，您只需隐藏 3D 画布（并可选择取消隐藏 PNG）