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

问题描述

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

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

当我在画布上绘制一条线时＃2 I想要在画布＃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);

但是我的画布＃1有一个getcontext（'webgl'）我不能这样做。

but beacuase my canvas#1 has a getcontext('webgl') i cant do that.

我的意思是如何为getcontext（'webgl'模拟

I mean how to simulate

  drawImage() for getcontext('webgl')?

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

I really appreciate any help or advice.

问候;

Zohreh

推荐答案

你可以使用2D canvas作为屏幕画布，并在绘制任何注释之前更新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.

ctx2D.drawImage(webGLCanvas, 0, 0);
// ctx2D.beginPath()...

或者可以简单地使用绝对定位和 z-index code>：

Or could 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>

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