切换画布上下文

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

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

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

如果这是不可能的，那么：

我可以嵌入HTML元素在画布上，并迫使该元素具有完全相同的一样，在画布（即使这最后的调整大小）？
我可以替换一个DOM节点，并更新每一个关于旧的参考来反映这个变化吗？

这是我目前的最小调用代码。 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); 
    } 
}

来源

2011-09-03 Maël Nison

你能发表一些实际的代码，所以我们得到一个想法如何正确回答这个问题，而不仅仅是“是”？ –

这样做了，我试着只保留代码的相关部分。 –

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

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

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

或者只是为了简单起见而使用PNG，集中在一个也包含画布的DIV中。换句话说：

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

然后，当你要显示你刚才隐藏3D画布（和可选取消隐藏PNG）

来源

2011-09-03 15:21:35

我做了这样的事情。但我认为无法将画布重置为其“无关联”状态是一种痛苦。这不是必须具备的功能，但它会很好。 –

不是有两个帆布覆盖，我去解决错误png格式是用自己的克隆替换现有的画布。

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

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

来源

2016-07-20 16:31:14 Fergal

切换画布上下文

回答

相关问题