02 WebGL的引入及超简单使用

来源：互联网发布：网络舆情是什么编辑：程序博客网时间：2024/05/21 12:39

<!doctype html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body onload="main()"><canvas id="canvas" height="400" width="400">    你的浏览器不支持WebGL，请更换新的浏览器</canvas></body><script>    function main() {        //首先获取到canvas的dom对象        var canvas = document.getElementById("canvas");        //获取到WebGL的上下文        var gl = canvas.getContext("webgl");        //不支持WebGL的浏览器将打印一个错误，并结束代码运行        if(!gl){            console.log("浏览器不支持WebGL");            return;        }        //指定一个覆盖（清空）canvas的颜色        gl.clearColor(0.0,0.0,0.0,1.0);        //执行清空        gl.clear(gl.COLOR_BUFFER_BIT);    }</script></html>

1.clearColor(red,green,blue,alpha);指定绘图区域的背景色

这个方法就相当于css设置rgba一样，区别就是 rgba的值是0到255，而clearColor是0.0 到 1.0 必须是浮点数，就是必须要带小数点。

最后一位是透明度，0.0为全透明，1.0是没有透明度。

2.gl.clear(buffer)

将指定缓冲区设定为预定的值。如果清空的是颜色缓冲区，那么将使用gl.clearColor()指定的值（作为预定值）。

参数：

（1）buffer 指定待清空的缓冲区，位操作符OR（|）可用来指定多个缓冲区（这句话我也不怎么懂）

（2）gl.COLOR_BUFFER_BIT 指定颜色缓存

（3）gl.DEPTH_BUFFER_BIT 指定深度缓冲区

（4）gl.STENCIL_BUFFER_BIT 指定模板缓冲区

清空缓冲区的默认颜色及其相关函数

颜色缓存区 (0.0,0.0,0.0,1.0) gl.clearColor(red,green,blue,alpha);

深度缓冲区 1.0 gl.clearDepth(depth)

模板缓冲区 0 gl.clearStencil(s)

0 0