将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 画布的同一事件中复制 WebGL 画布，那么您需要以下解决方案之一。尽管这个问题与toDataURL使用 WebGL 画布和drawImage.

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>