Question

我已经习惯了Flash，我可以在Stage3D（OpenGL）上结合旧的2D API。

现在我想使用 EaselJS ，这与我的用户界面的Flash 2D API非常相似，但我希望它可以通过 3D进行绘制内容

现在，AFAIK EaselJS是基于Canvas的。是否有可能以某种方式将Canvas与WebGL结合？或者它需要严重的黑客攻击？

Answer 1

WebGL画布只是一个画布，就像任何其他HTML元素一样。您可以根据需要进行堆叠（最多可以设置浏览器设置限制或内存）

这里有5层。

底部div
一个webgl画布
中间div
2d画布
顶级div

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

是否可以在WebGL内容上绘制透明画布？

1 个答案: