webgl绘制线段和三角形

绘制线段有三种方式，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