切換畫布上下文

假設我有一個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

切換畫布上下文

回答

相關問題