<canvas>标签
canvas标签是HTML5用来绘制动画的画布，当然WebGL也是基于canvas的
<canvas id="" width="" height=""></canvas>
需要注意的是，在canvas标签中，只有id、width、height三个属性，当然，更多关于canvas标签的内容请参考Html5 canvas参考手册
WebGL函数库
webgl-utils.js
webgl-debug.js
cuon-debug.js
这几个函数库，是我在作者的GITHUB上免费下载的（某些人在某些平台将作者的知识拿去收费下载的行为，我真的无语到极致，在这里给大家免费的下载链接） WebGL函数库
使用函数库的原因是在canvas中，会使用getContext函数获取上下文，但是不同浏览器对于WebGL的支持情况不一样，为了屏蔽这些差异，就像jQuery屏蔽不同浏览器差异一样，该函数的作者就写了该函数库，同时也是为了优化WebGL的编程。
简单的WebGL程序：清空绘图区
html文件如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloCanvas</title>
</head>
<body onload='main()'>
<canvas id="webgl" width="400" height="400">
your browser does not support canvas
</canvas>
<script src="./js/webgl-debug.js"></script>
<script src="./js/webgl-utils.js"></script>
<script src="./js/cuon-utils.js"></script>
<script>
//为了使得一个文件解决所有问题， 此处编写WebGL代码
/*main函数是在body加载完毕后回调*/
function main(){
let canvas = document.getElementById('webgl')
let gl = getWebGLContext(canvas)
if(!gl){
console.log('Failed to get the rendering context for WebGL')
}
}
gl.clearColor(1.0,1.0,0.0,1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
</script>
</body>
</html>
我们依次来看其中使用到函数
let gl = getWebGLContext(canvas,[debug])
这个函数用来获取绘图上下文的。我们在绘制2D图形时，会使用getContext('2d')，当然获取3D时应该传入webgl，但是不同浏览器的兼容问题，这里使用函数中的getWebGLContext来获取上下文从而忽略差异
debug是一个可选的布尔值参数，如果需要在控制台打印出错误信息，那么需要将其设置为true，其他环境下建议设置成false，因为dubeg会消耗浏览器性能。
同时如果gl没有获取成功，gl会被设置为null，为了提高用户体验感，应该在这里判断下用户客户端是否成功获取gl对象，进而采取不同的措施。
gl.clearColor(1.0, 1.0, 0.0, 1.0)
设置背景色，告知WebGL清空背景色时，应该用什么样的颜色。参数是rgba格式的，所以需要4个值，但前三个值不再是使用CSS那种0-255取值，而是使用0-1取值，最后一个值为透明度alpha，同样是0-1，值越高透明度越低。这是因为WebGL是继承于OpenGL，因此WebGL遵循传统的OpenGL颜色分量的取值范围。
背景色设置后，会被保存到WebGL系统之中，因此设定一次WebGL后，下次清空绘图区如果不更改背景色时，就不再需要指定设置背景色。
gl.clear(gl.COLOR_BUFFER_BIT)
告知WebGL清除绘图区，准确来说，是清除颜色缓冲区。
提到颜色缓冲区，就简单介绍下：
WebGL会使用各种各样的缓冲区，比如颜色缓冲区、模板缓冲区、深度缓冲区等
gl.COLOR_BUFFER_BIT参数就是指定清除颜色缓冲区
其他参数，如
gl.DEPTH_BUFFER_BIT 深度缓冲区，默认为 1
gl.STENCIL_BUFFER_BIT 模板缓冲区，默认为 0
如果需要传入多个参数 使用OR(|)位运算符链接
后续文章会介绍到其他缓冲区和参数值
到现在为止，大家应该可以看到如下的效果
main方法执行流程图
简短的入门就到此为止，下一章我们将学习如何在canvas上使用WebGL绘制一个点
