四、多种图形绘制

1.drawArrays()

WebGLRenderingContext.drawArrays() 方法用于从向量数组中绘制图元。

1.1 语法

void gl.drawArrays(mode, first, count);

1.2 参数

mode：指定绘制图元的方式，可能值如下。

• gl.POINTS: 绘制一系列点。
• gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
• gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
• gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
• gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
• gl.TRIANGLE_STRIP：连续绘制三角形，0,1,2形成第一个三角形，1,2,3形成第二个三角形，2,3,4形成第三个三角形，一直到最后不满足三个点。
• gl.TRIANGLE_FAN：绘制三角扇，即第一个点和每两个连续点绘制一个三角形

first：指定从哪个点开始绘制。

count：指定绘制需要使用到多少个点。

1.3 mode参数类型

1.3.1 POINTS

可视的点

上面六个点的绘制顺序是：v0, v1, v2, v3, v4, v5

1.3.2 LINES

绘制一系列单独线段。每两个点作为端点，线段之间不连接。

1.3.3 LINE_STRIP

绘制一个线条。即，绘制一系列线段，上一点连接下一点。

1.3.4 LINE_LOOP

绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。

1.3.5 TRIANGLES

绘制一系列三角形。每三个点作为顶点。

1.3.6 TRIANGLE_STRIP

连续绘制三角形，0,1,2形成第一个三角形，1,2,3形成第二个三角形，2,3,4形成第三个三角形，一直到最后不满足三个点。

1.3.7 TRIANGLE_FAN

绘制三角扇，即第一个点和每两个连续点绘制一个三角形

2.drawElements()

2.1 语法

void gl.drawElements(mode, count, type, offset);

2.2 参数

• mode：指定绘制图元的方式，同drawArrays()的mode
• count：指定要渲染的元素数量
• type：指定元素缓冲区中的值的类型，可能的值为
  • gl.UNSIGNED_BYTE
  • gl.UNSIGNED_BYTE_SHORT
• offset：指定元素数组缓冲区中的偏移量，必须是给定类型大小的有效倍数