切换画布上下文

Posted 2023-03-05

【中文标题】切换画布上下文

【英文标题】：Switch canvas context

【发布时间】：2011-11-09 18:17:56

【问题描述】：

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

以后有什么方法可以切换上下文以使用“2d”吗？

这样的目标是在渲染过程中发生错误时显示类似 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);
    

【问题讨论】：

您能否发布一些实际代码，以便我们了解如何正确回答这个问题，而不仅仅是“是”？

大功告成，我试着只保留相关的代码部分。

【参考方案1】：

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

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

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

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

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

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

【讨论】：

我做过这样的事情。但我认为无法将画布重置为“无上下文”状态是一种痛苦。这不是必须具备的功能，但会很好。

【参考方案2】：

我采用的解决方案不是让两个画布重叠，而是用自己的克隆替换现有的画布。

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

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