假设我有一个 WebGL Canvas (通过调用 getContext("experimental-webgl")
)。
有什么方法可以稍后切换上下文以使用 "2d"
吗?
这样的事情的目标是在渲染过程中发生错误时显示类似调试的 BSOD。
如果不可能,那么:
- 我能否在 Canvas 上嵌入一个 html 元素,并强制该元素与 Canvas 完全相同(即使最后调整了大小)?
- 我可以替换一个 dom 节点,并更新所有关于旧节点的引用以反射(reflect)更改吗?
[edit] 这是我当前的最小调用代码。 Canvas 是包含由 WebGL API 填充的 Canvas 的 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);
}
}
最佳答案
根据规范,简短的回答几乎是否定的。
每个 Canvas 都有所谓的主要上下文。这是在 Canvas 上调用的第一个上下文。在 Canvas 上制作非主要上下文可能会在不同的浏览器上做一些事情,但我永远不会依赖它。
我会用第二个 Canvas 覆盖在第一个 Canvas 上并保持相同的宽度和高度属性。然后我会隐藏一个并取消隐藏另一个(或者当你想看到它时只取消隐藏 2D 的)。
或者为了简单起见,只使用 PNG。它位于同样包含 Canvas 的 DIV 内部。换句话说:
Div container has black background and holds:
- PNG (centered)
- 3D Canvas
然后当您想要显示错误 png 时,您只需隐藏 3D Canvas (并可选择取消隐藏 PNG)
关于javascript - 切换 Canvas 上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7293778/