如何使用 getContext('webgl') 将另一个画布的数据复制到画布上？

我有一个用于显示医学图像的画布，还有另一个用于通过绘制形状或线条注释图像的画布。

当我在 canvas#2 上画一条线时，我想复制在 canvas#1 上画的线，如下所示：

  var context = canvas1.getContext('2d');
  context.drawImage(canvas2,0,0);

但因为我的 canvas#1 有一个 getContext('webgl') 我不能这样做。

我的意思是如何模拟

  drawImage() for getcontext('webgl')?

我真的很感谢任何帮助或建议。

Regards;

Zohreh

好吧，你可以使用toDataURLwebgl canvas 的方法将其转换为图像。然后在二维上下文中绘制它。

ctx2D.drawImage(webGLCanvas.toDataURL("image/png"), 0, 0);

在这种情况下，我相信您可能必须设置preserveDrawingBuffer初始化 webgl 画布时，将其属性设置为 true。

...getContext("webgl", {preserveDrawingBuffer: true});