javascript七基础学习系列一千四百六十九：常量

如果你熟悉OpenGL，那么可能知道用于操作的各种常量。这些常量在OpenGL 中的名字以GL_开
头。在WebGL 中，context 对象上的常量则不包含GL_前缀。例如，GL_COLOR_BUFFER_BIT 常量在
WebGL 中要这样访问gl.COLOR_BUFFER_BIT。WebGL 以这种方式支持大部分OpenGL 常量（少数常
量不支持）。
方法命名
OpenGL（同时也是WebGL）中的很多方法会包含相关的数据类型信息。接收不同类型和不同数量
参数的方法，会通过方法名的后缀体现这些信息。表示参数数量的数字（1~4）在先，表示数据类型的
字符串（“f”表示浮点数，“i”表示整数）在后。比如，gl.uniform4f()的意思是需要4 个浮点数值
参数，而gl.uniform3i()表示需要3 个整数值参数。
还有很多方法接收数组，这类方法用字母“v”（vector）来表示。因此，gl.uniform3iv()就是要
接收一个包含3 个值的数组参数。在编写WebGL 代码时，要记住这些约定。
准备绘图
准备使用WebGL 上下文之前，通常需要先指定一种实心颜色清除。为此，要调用
clearColor()方法并传入4 个参数，分别表示红、绿、蓝和透明度值。每个参数必须是0~1 范围内的
值，表示各个组件在最终颜色的强度。比如：
gl.clearColor(0, 0, 0, 1); // 黑色
gl.clear(gl.COLOR_BUFFER_BIT);
以上代码把清理颜色缓冲区的值设置为黑色，然后调用clear()方法，这个方法相当于OpenGL
中的glClear()方法。参数gl.COLOR_BUFFER_BIT 告诉WebGL 使用之前定义的颜色填充画布。通
常，所有绘图操作之前都需要先清除绘制区域。
视口与坐标
绘图前还要定义WebGL 视口。默认情况下，视口使用整个区域。要改变视口，可以调用
viewport()方法并传入视口相对于元素的x、y 坐标及宽度和高度。例如，以下代码表示要
使用整个元素：
gl.viewport(0, 0, drawing.width,
drawing.height);
这个视口的坐标系统与网页中通常的坐标系统不一样。
知道如何定义视口就可以只使用元素的一部分来绘图。比如下面的例子：
// 视口是 左下角四分之一区域
gl.viewport(0, 0, drawing.width/2, drawing.height/2);
// 视口是 左上角四分之一区域
gl.viewport(0, drawing.height/2, drawing.width/2, drawing.height/2);
// 视口是 右下角四分之一区域
gl.viewport(drawing.width/2, 0, drawing.width/2, drawing.height/2);
定义视口的坐标系统与视口中的坐标系统不一样。
如果绘图时使用了视口外部的坐标，则绘制结果会被视口剪切。例如，要绘制的形状有一个顶点在
(1, 2)，则视口右侧的图形会被切掉。