將webgl畫布傳遞給CanvasRenderingContext2D.drawImage（）

Question

我試圖將一個畫布的內容復制到另一個畫布。

源畫布具有webgl上下文。

目標畫布具有2d上下文。

我的代碼看起來像：

destinationContext.drawImage(sourceCanvas, 0, 0);

這適用於Firefox和IE，但它在Chrome中不起作用。 為什么不？

謝謝！

Answer 1

這是一些有效的代碼。

 const gl = document.querySelector("#a").getContext("webgl"); const ctx = document.querySelector("#b").getContext("2d"); // put a rectangle in the webgl canvas gl.enable(gl.SCISSOR_TEST); gl.scissor(10,20,100,50); gl.clearColor(0,0,1,1); gl.clear(gl.COLOR_BUFFER_BIT); // copy the webgl canvas to the 2d canvas ctx.drawImage(gl.canvas, 0, 0); 

 canvas { border: 1px solid black; margin: 5px; } 

 <canvas id="a" width="200" height="100"></canvas> <canvas id="b" width="200" height="100"></canvas> 

這是一些有延遲的工作代碼。 如果您沒有在繪制的同一事件中復制WebGL畫布，則需要其中一個解決方案 。 即使這個問題是關於toDataURL所有相同的事情都適用於使用帶有drawImage的WebGL畫布。

 const gl = document.querySelector("#a").getContext("webgl", { preserveDrawingBuffer: true, }); const ctx = document.querySelector("#b").getContext("2d"); // put a rectangle in the webgl canvas gl.enable(gl.SCISSOR_TEST); gl.scissor(10,20,100,50); gl.clearColor(0,0,1,1); gl.clear(gl.COLOR_BUFFER_BIT); // copy the webgl canvas to the 2d canvas 1 second later setTimeout(copy, 1000); function copy() { ctx.drawImage(gl.canvas, 0, 0); } 

 canvas { border: 1px solid black; margin: 5px; } 

 <canvas id="a" width="200" height="100"></canvas> <canvas id="b" width="200" height="100"></canvas>