绘制线段有三种方式，LINES、LIN_STRIP、LIN_LOOP。
TRIANGLE_FAN.png
var data = new Float32Array([
0.0,0.0,
0.5,0.0,
0.5,0.5,
0.0,0.9,
-0.5,0.5,
-0.5,0.0,
]);
var aPosLocation = ctx.getAttribLocation(program,'aPos');
var buffer = ctx.createBuffer();
ctx.bindBuffer(ctx.ARRAY_BUFFER,buffer);
ctx.bufferData(ctx.ARRAY_BUFFER,data,ctx.STATIC_DRAW);
ctx.vertexAttribPointer(aPosLocation,2,ctx.FLOAT,false,0,0);
ctx.enableVertexAttribArray(aPosLocation);
//ctx.drawArrays(ctx.LINES,0,6); //绘制线段 两个一组
//ctx.drawArrays(ctx.LINE_STRIP,0,6);//绘制线段 依次连接
//ctx.drawArrays(ctx.LINE_LOOP,0,6);//绘制线段 依次连接 首尾相连
LINES.png
LINE_STRIP.png
ctx.drawArrays(ctx.TRIANGLES,0,6); //绘制三角形 三个一组
LINE_LOOP.png
绘制三角形的方式也有三种。
TRIANGLES.png
ctx.drawArrays(ctx.TRIANGLE_STRIP,0,6); //绘制三角形 依次组成三角形
可以方便的绘制出三角形带。
TRIANGLE_STRIP.png
ctx.drawArrays(ctx.TRIANGLE_FAN,0,6);//以第一个顶点为中心点，其他顶点作为边缘点依次绘制
可以方便的绘制出扇面。
TRIANGLE_FAN.png
上图第一个点和最后一个点y轴相同，不方便观察。将第一个点向上移动再绘制一次。
TRIANGLE_FAN.png
TRIANGLE_FAN.png
