卜若的代码笔记-webgl系列-第十章：在Webgl场景里面添加UI

1 首先你必须要了解，在html里面2d才是爸爸，canvas只是提供了一个绘制的容器，所以，在webgl里面提供标签，本质其实是...

canvas和html 的dom元素的联合显示：

最简单的例子：

本质上是两个div的叠加，一个div存放canvas，另外一个div存放的是UI，当然咯，两个要联合显示，需要一点点style 的设置：

    <div >

        <div style="z-index: 30;position:absolute;">
           I'M UI Container<br>
            ITS YEAR~<br>
        </div>
        <div id="ca" style="width: 800px;height: 800px;background: #aa5500;float: left;z-index: 10;position:absolute;">

        </div>


    </div>

2 下面的这个demo，我将会演示一个使用它的UI去创建一个方向键

 

 

函数被我封装了，但其实很简单，因为关联比较多，剩下的代码就不贴了，相信敢挑战wengl的都不是菜鸟了。

最后是演示的demo：