Question

我正在尝试将一个画布的内容复制到另一个画布。

源画布具有webgl上下文。

目标画布具有2d上下文。

我的代码如下：

destinationContext.drawImage(sourceCanvas, 0, 0);

这适用于Firefox和IE，但在Chrome中不起作用。为什么不呢？

谢谢！

Answer 1

这里有一些工作代码。

＆＃13;

urlparse

＆＃13;

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);

＆＃13;

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

＆＃13;

这里有一些延迟的工作代码。如果您没有在绘制的同一事件中复制WebGL画布，则需要one of these solutions。即使这个问题是关于<canvas id="a" width="200" height="100"></canvas> <canvas id="b" width="200" height="100"></canvas>，所有相同的事情都适用于使用toDataURL的WebGL画布。

＆＃13;

drawImage

＆＃13;

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);
}

＆＃13;

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

＆＃13;

将webgl画布传递给CanvasRenderingContext2D.drawImage（）

1 个答案: