webGL公用函数库的引用（笔记3）

最新推荐文章于 2021-03-06 15:45:08 发布

原创最新推荐文章于 2021-03-06 15:45:08 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webGL公用函数 #webGL #webGL笔记 #webGL函数库 #webGL函数

WebGL笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML5的canvas元素结合WebGL技术进行绘图，通过一个简单的示例展示了如何创建WebGL上下文并设置背景颜色。此外，还提供了一个兼容性方法getWebGLContext用于不同浏览器环境。

<!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 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.3, 0.3, 0.3, 0.5)

    //执行清空
    gl.clear(gl.COLOR_BUFFER_BIT)
  }
</script>
</html>

引入了为WebGL准备的三个函数库。
使用了一个获取WebGL上下文的兼容性的方法getWebGLContext：getWebGLContext( element [ debug ] )；用来获取WebGL绘图的上下文。
（
参数说明：
element 指定canvas的元素对象；
debug（可选）默认为false，如果设置为true，Javascript中发生的错误将被显示在控制台上。注意，在调试结束后关闭它，否则影响性能。
返回值： not-null WebGL绘图上下文， null WebGL不可用
）
函数库的下载地址：https://download.youkuaiyun.com/download/m0_37036014/10457542