02 WebGL的引入及超简单使用

最新推荐文章于 2024-05-27 07:00:00 发布

暮志未晚NAN

最新推荐文章于 2024-05-27 07:00:00 发布

阅读量3.4k

点赞数 3

分类专栏： WebGL 文章标签： webgl javascript

本文链接：https://blog.csdn.net/qq_30100043/article/details/70767766

版权

WebGL 专栏收录该内容

58 篇文章 74 订阅

订阅专栏

<!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 οnlοad="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)

暮志未晚NAN

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
02 WebGL的引入及超简单使用

Document 你的浏览器不支持WebGL，请更换新的浏览器 function main() { //首先获取到canvas的dom对象 var canvas = document.getElementById("canvas"); //获取到WebGL的上下文 var gl = canvas.get
复制链接

扫一扫