1.绘制一个点

愿你出走半生,归来仍是少年！

1.知识点

1.1.画布

        Canvas对象是在网页中的画布对象，具有2D和3D绘图功能。

        canvas.getContext('2d')可获取画布的二维绘制对象（CanvasRenderingContext2D）；canvas.getContext('webgl') canvas.getContext('webgl2')可获取画布的三维绘制对象（WebGLRenderingContext | WebGL2RenderingContext）；

1.2.WebGL2RenderingContext

       WebGL2RenderingContext接口提供基于 OpenGL ES 3.0 的绘图上下文，用于在 HTML  元素内绘图。

1.2.1.createShader(Type)

        用于创建一个 WebGLShader 着色器对象，该对象可以使用shaderSource()和 complileShader()方法配置着色器代码。参数为gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER两者中的一个。

1.2.2.shaderSource(shader,source)

        用于设置 WebGLShader 着色器（顶点着色器及片元着色器）的 GLSL 程序代码。

1.2.3.compileShader(shader)

        用于编译一个 GLSL 着色器，使其成为为二进制数据，然后就可以被WebGLProgram对象所使用。

1.2.4.createProgram() 

        用于创建和初始化一个 WebGLProgram 对象。

1.2.5.attachShader(program, shader)

        负责往 WebGLProgram 添加一个片段或者顶点着色器。

1.2.6.linkProgram(program)

        链接给定的WebGLProgram，从而完成为程序的片元和顶点着色器准备 GPU 代码的过程。

1.2.7.useProgram(program)

        将定义好的WebGLProgram 对象添加到当前的渲染状态中

1.2.8.drawArrays(mode, first, count)

        用于从向量数组中绘制图元

2.代码