是否可以通过WebGL内容绘制一个透明的画布？ [英] Is it possible to draw a transparent canvas over WebGL content?

问题描述

我习惯于Flash，我可以结合使用Stage3D（OpenGL）的旧2D API。

现在我想使用 EaselJS 这非常类似于我的UI的Flash 2D API，但我想要绘制超过 3D内容。

现在，AFAIK EaselJS是基于Canvas的。是否可以通过某种方式在WebGL上组合Canvas ？

解决方案

WebGL画布只是一个画布，就像任何其他HTML元素一样。你可以堆栈尽可能多的浏览器设置限制或内存）

这里有5层。

1. 底部


2. 一个webgl画布


3. 中部







6. b

     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）;  / pre> 
    ＃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>  
    

   b
   $ b

   这里有一篇文章将文字绘制成2d画布层叠在webgl画布顶部。

   
   

   I am used to Flash where I can combine the old 2D API over Stage3D (OpenGL).

   Now I would like to use EaselJS which is very similar to the Flash 2D API for my UI, but I would like it to be drawn over 3D content.

   Now, AFAIK EaselJS is Canvas-based. Is it be possible to combine Canvas over WebGL in some way? Or would it require serious hacks?

   解决方案

   A WebGL canvas is just a canvas which is like any other HTML element. You can stack as many as you like (up to browser set limits or memory)

   Here's 5 layers.

   1. A bottom div
   2. A webgl canvas
   3. A middle div
   4. A 2d canvas
   5. A top div

   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.

   这篇关于是否可以通过WebGL内容绘制一个透明的画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！