WebGl 实现多种图形的绘制

gl.drawArrays函数是WebGL中用于绘制图形的核心函数之一。它根据指定的模式（mode）从当前激活的顶点缓冲区（VBO）中提取顶点数据，并将它们绘制成图形。

1. 参数类型

值	作用	说明
gI.POINTS	点	一系列点
gI.LINES	线	一系列单独的线段，如果顶点是奇数，最后一个会被忽略
gI.LINE_LOOP	闭合线	一系列连接的线段，结束时，会闭合终点和起点
gI.LINE_STRIP	线条	一系列连接的线段，不会闭合终点和起点
gI.TRIANGLES	三角形	一系列单独的三角形
gI.TRIANGLE_STRIP	三角带	一系列条带状的三角形
gI.TRIANGLE_FAN	三角扇	飘带三角形状三角形

2. 代码演示

// 绘制点
gl.drawArrays(gl.POINTS, 0, numPoints);

// 绘制线段
gl.drawArrays(gl.LINES, 0, numLines);

// 绘制线条
gl.drawArrays(gl.LINE_STRIP, 0, numLineStrip);

// 绘制回路
gl.drawArrays(gl.LINE_LOOP, 0, numLineLoop);

// 绘制三角形，顶点数必须是3个或3的倍数
gl.drawArrays(gl.TRIANGLES, 0, numTriangles);

// 绘制三角带
gl.drawArrays(gl.TRIANGLE_STRIP, 0, numTriangleStrip);

// 绘制三角扇
gl.drawArrays(gl.TRIANGLE_FAN, 0, numTriangleFan);