切换画布上下文

Question

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

是否有任何方法稍后切换上下文以使用“2d”？

这样做的目的是在渲染期间发生错误时显示类似于调试BSOD的内容。

如果不可能，那么：

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

[编辑] 这是我的当前最小调用代码。 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);
    }
}

- Maël Nison

---

你能贴一些实际的代码吗，这样我们才能更好地回答这个问题，而不仅仅是回答“是”吗？ - Caspar Kleijne

完成了，我尽量只保留了代码中相关的部分。 - Maël Nison

Answer 1

简短的回答是，根据规范几乎不行。

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

我会使用另一个与第一个相同宽度和高度属性的覆盖在第一个上面的画布。然后我会隐藏一个并显示另一个（或者只在需要时显示2D画布）。

或者为了简单起见，只需使用PNG，居中放置在包含画布的DIV中。换句话说：

容器具有黑色背景并包含：

• PNG（居中）
• 3D画布

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

- Simon Sarris

---

我做过类似的事情。但是我认为没有办法将画布重置为其“无上下文”状态是一件很麻烦的事情。这不是必须的功能，但它会很好。 - Maël Nison

Answer 2

我选择的解决方法不是让两个画布互相覆盖，而是用它自己的一个克隆体替换现有的画布。

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

所有原始画布的属性将被保留，但上下文将被释放以供您随意分配。

- Fergal

---

你所说的属性是指简单的HTML/DOM属性还是与画布绘制相关的其他属性？ - EoghanM