如何使用HTML5和webgl在网页上绘制一个点

JavaScript开发工具，可用webstorm，也可用其他的

支持html5的浏览器，如火狐浏览器

首先，介绍一下webgl的程序结构。在HTML中，动态网页包括HTML和JavaScript两种语言。引入webgl后，还需要加入着色器语言GLSL ES，也就是说，webgl包含了三种语言：HTML5、JavaScript和GLSL ES。然而，因为通常GLSL ES是（以字符串的形式）在JavaScript中编写的，实际上webgl程序也只需用到HTML文件和JavaScript文件。

下面将展示如何在页面上绘制一个点，以介绍webgl的使用。绘制的程序流程如图所示。后面会详细解释每一步的具体实现。

在编写js代码之前需要导入需要的引用js文件，类似于库文件，直接使用。参考资料中会给出库文件的下载地址。完整的代码如图所示。

字符变量VSHADER_SRC和FSHADER_SRC是上面提到的GLSL ES语言，其中VSHADER_SRC代表顶点着色器，用来设置点的位置和大小等信息；FSHADER_SRC是片元着色器用来设置点显示的颜色。字符串中的语句会传给webgl系统，进行绘制。

页面加载后会触发onload事件，继而调用main()函数。main函数的第一行，即是获得canvas对象。

将得到的canvas对象作为参数传入getWebGLContext中，该函数返回值为用于绘制点的对象。

然后，初始化顶点着色器和片元着色器，设置背景色、清空颜色缓存并调用绘制函数。其中，绘制函数gl.drawArrays(gl.POINTS,0,1)，第一个参数为绘制的类型，第二个参数为绘制的起点，第三个参数为绘制点的个数。