如何使用getContext（'webgl'）在画布上复制另一个画布的数据？ [英] how to copy another canvas's data on the canvas with getContext('webgl')?

问题描述

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

I have a canvas for showing medical image and I have another canvas for annotating images by draw shape or line.

当我在canvas＃2上画一条线时，要复制在canvas＃1上绘制的线条，例如：

when I draw a line on canvas#2 I want to copy drawn line on canvas#1 something like this:

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

但是因为我的canvas＃1具有getContext（'webgl'），所以我不能这样做。

but because my canvas#1 has a getContext('webgl') I can't do that.

我的意思是如何模拟

  drawImage() for getcontext('webgl')?

我非常感谢任何帮助或建议。

I really appreciate any help or advice.

致谢；

Zohreh

推荐答案

您可以使用2D画布作为屏幕上的画布，并在更新WebGL画布之前在其上绘制任何注释之前在其上绘制WebGL画布。

You could use a 2D canvas as the on-screen canvas, and draw the WebGL canvas to it when updating the WebGL canvas before drawing whatever annotations on.

drawWebGLStuff(webGLCtx);

// Copy image data of WebGL canvas to 2D canvas.
// This should be done right after WebGL rendering,
// unless preserveDrawingBuffer: true is passed during WebGL context creation,
// since WebGL will swap buffers by default, leaving no image in the drawing buffer,
// which is what we want to copy.
ctx2D.drawImage(webGLCanvas, 0, 0);

drawAnnotations(ctx2D);

（可以从形状列表中的每一帧渲染注释，也可以将其绘制到另一个屏幕外画布上，然后被绘制到类似于WebGL画布的主（屏幕上）画布。）

(The annotations could be rendered each frame from a list of shapes or drawn to another offscreen canvas, which is then drawn to the main (on-screen) canvas similar to the WebGL canvas.)

或者您也可以简单地使用绝对定位和 z-index 的页面上的画布：

Or you can simply layer the canvases on the page with absolute positioning and z-index:

<div style="position: relative;">
   <canvas id="layer1" width="100" height="100" 
       style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
   <canvas id="layer2" width="100" height="100" 
       style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

这篇关于如何使用getContext（'webgl'）在画布上复制另一个画布的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！