2016-02-11 36 views
0

我習慣於Flash,我可以通過Stage3D(OpenGL)結合舊的2D API。現在是否可以在WebGL內容上繪製透明畫布?

我想用EaselJS這是非常相似的閃存2D API爲我的用戶界面,但我想它要繪製3D內容

現在,AFAIK EaselJS是基於畫布的。是否有可能通過WebGL以某種方式將畫布組合成?或者它會需要嚴重的黑客?

回答

2

WebGL畫布只是一個畫布,就像任何其他HTML元素。您可以根據需要堆疊任意數量(達到瀏覽器設置的限制或內存)

這裏有5個圖層。

  1. 底部的div
  2. 甲webgl的畫布
  3. 的中間格
  4. 2D畫布
  5. 頂格

var gl = document.querySelector("#l1").getContext("webgl"); 
 
gl.enable(gl.SCISSOR_TEST); 
 
gl.scissor(100, 50, 100, 90); 
 
gl.clearColor(0, 0.25, 0, 0.25); 
 
gl.clear(gl.COLOR_BUFFER_BIT); 
 

 
var ctx = document.querySelector("#l3").getContext("2d"); 
 
ctx.fillStyle = "rgba(255,0,255,0.25)"; 
 
ctx.font = "55px san-serif"; 
 
ctx.textAlign = "center"; 
 
ctx.fillText("layer 3", 150, 50);
#l0, #l1, #l2, #l3, #l4 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 300px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    font-weight: bold; 
 
} 
 

 
#l0 { 
 
    color: rgba(255,0,0,0.25); 
 
    font-size: 70px; 
 
} 
 

 
#l2 { 
 
    color: rgba(0,255,0,0.25); 
 
    font-size: 60px; 
 
} 
 

 
#l4 { 
 
    color: rgba(0,0,255,0.25); 
 
    font-size: 50px; 
 
}
<div id="l0">layer 0</div> 
 
<canvas id="l1"></canvas> 
 
<div id="l2">layer 2</div> 
 
<canvas id="l3"></canvas> 
 
<div id="l4">layer 4</div>

Here's an article that draws text into a 2d canvas layered on top of a webgl canvas

相關問題