5

医療画像を表示するためのキャンバスがあり、図形や線を描くことで画像に注釈を付けるための別のキャンバスがあります。

キャンバス＃2に線を描くとき、​​キャンバス＃1に描いた線を次のようにコピーしたい：

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

しかし、キャンバス #1 には getContext('webgl') があるため、それはできません。

シミュレートする方法を意味します

  drawImage() for getcontext('webgl')?

助けやアドバイスをいただければ幸いです。

よろしく;

ゾーレ

4

3 に答える 3

1

まあ、toDataURLwebgl キャンバスのメソッドを使用して画像に変換できます。次に、2d コンテキストで描画します。

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

この場合preserveDrawingBuffer、初期化時に webgl キャンバスのプロパティを true に設定する必要があると思います。

...getContext("webgl", {preserveDrawingBuffer: true});
于 2013-10-30T03:04:14.370 に答える
1

2D キャンバスを画面上のキャンバスとして使用し、注釈を描画する前に WebGL キャンバスを更新するときに WebGL キャンバスを描画することができます。

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 キャンバスと同様にメイン (画面上の) キャンバスに描画することができます。)

または、ページ上にキャンバスを単純に重ねて、絶対配置と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>
于 2016-12-03T21:50:00.977 に答える