03 WebGL定义好的库的引用

最新推荐文章于 2023-02-10 10:46:01 发布

暮志未晚NAN

最新推荐文章于 2023-02-10 10:46:01 发布

阅读量3k

点赞数 1

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

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

版权

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 src="lib/webgl-utils.js" ></script>
<script src="lib/webgl-debug.js" ></script>
<script src="lib/cuon-utils.js" ></script>
<script>
    function main() {
        //首先获取到canvas的dom对象
        var canvas = document.getElementById("canvas");

        //获取到WebGL的上下文
        var gl = getWebGLContext(canvas);

        //不支持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.引入了为WebGL准备的三个函数库。

2.使用了一个获取WebGL上下文的兼容性的方法getWebGLContext

getWebGLContext(element[,debug]); 用来获取WebGL绘图的上下文。

参数：1.element 指定canvas的元素对象

2.debug（可选）默认为false，如果设置为true，Javascript中发生的错误将被显示在控制台上。注意，在调试结束后关闭它，否则影响性能。

返回值： not-null WebGL绘图上下文， null WebGL不可用

函数库的下载地址：http://download.csdn.net/detail/qq_30100043/9825567

暮志未晚NAN

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
03 WebGL定义好的库的引用

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Document 你的浏览器不支持WebGL，请更换新的浏览器 funct
复制链接

扫一扫