Question

假设我有一个WebGL画布（通过调用getContext（“experimental-webgl”））。

有没有办法在以后使用“2d”来切换上下文？

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

如果不可能，那么：

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

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

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);
    }
}

Answer 1

根据规范，简短的回答几乎没有。

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

我希望第二个画布覆盖在第一个画布上，并保持相同的宽度和高度属性。然后我会隐藏一个并取消隐藏另一个（或者只是在你想要它时取消隐藏2D）。

或者只是为了简单起见而使用PNG。，在一个同样拥有画布的DIV中心。换句话说：

 Div container has black background and holds:
   -PNG (centered)
   -3D Canvas

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

Answer 2

我没有覆盖两个画布，而是采用的解决方案是将现有画布替换为自身的克隆。

var newCvs = cvs.cloneNode(false);
cvs.parentNode.replaceChild(newCvs, cvs);
cvs = newCvs;

原始画布的所有属性都将被保留，但上下文将被释放以按照您的意愿进行分配。

切换画布上下文

2 个答案: