如何使用getContex（'webgl'）在畫布上覆制另一個畫布數據？

我有一個用於顯示醫學圖像的畫布，我有另一個用於繪製圖形或線條的圖像。如何使用getContex（'webgl'）在畫布上覆制另一個畫布數據？

，當我在畫布上繪製＃2線我要複製畫線在畫布上＃1是這樣的：

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

但beacuase我的畫布＃1具有的getContext（「WebGL的」）我不能去做。

我的意思是如何模擬

drawImage() for getcontext('webgl')?

我真的很感激任何幫助或建議。

問候;

Zohreh

來源

2013-10-29 Zohreh

好吧，你可以只使用WebGL畫布的toDataURL方法將其轉換爲圖像。然後在2d上下文中繪製它。

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

在這種情況下，我相信你可能有初始化時的preserveDrawingBuffer propertie WebGL的畫布設置爲true。

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

來源

2013-10-30 03:04:14 Delta

感謝您的答案，但我完全需要反之亦然。我想用images（'webgl'）將圖像複製到畫布上。 – Zohreh

對不起，我錯了。這有點複雜，在這種情況下，您必須通過toDataURL獲取2D畫布圖像，並將其用作正方形平面上的紋理，並使用正投影矩陣將其繪製在openGL上下文中。但我沒有進入OpenGL的東西，所以我不能真正幫助你= / – Delta

你可以使用一個二維畫布屏幕上的帆布，並借鑑任何註釋之前更新WebGL的帆布畫時WebGL的畫布它。

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

或可能可以用絕對定位和z-index在頁面上簡單地layer the canvases：

<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-03 21:50:00 1j01

如何使用getContex（'webgl'）在畫布上覆制另一個畫布數據？

回答

相關問題