webgl 绘制三角形和线的绘制

gl.drawArrays(mode,first,count) 方法可以绘制一下图形：

• POINTS 可视的点
• LINES 单独线段
• LINE_STRIP 线条
• LINE_LOOP 闭合线条
• TRIANGLES 单独三角形
• TRIANGLE_STRIP 三角带
• TRIANGLE_FAN 三角扇形

线条

• LINES 单独线段实例

gl.drawArrays(gl.LINES, 0, 4)

image.png

• LINE_STRIP 线条

gl.drawArrays(gl.LINE_STRIP, 0, 4)

image.png

• LINE_LOOP 闭合线段

gl.drawArrays(gl.LINE_LOOP, 0, 4)

image.png

三角形的绘制

• 单独三角形的绘制

gl.drawArrays(gl.TRIANGLES, 0, 6)

image.png

• 三角带
  三角带画三角形的规律是
  第偶数个三角形：以上一个三角形的第二条边+下一个点为基础，以和第二条边相反的方向绘制三角形

第奇数个三角形：以上一个三角形的第三条边+下一个点为基础，以和第二条边相反的方向绘制三角形

image.png

• 注意:
  如果 draw输入的个数大于实际点的个数,那么默认会添加(0,0)进行绘制

• 三角扇形

gl.drawArrays(gl.TRIANGLES_FAN, 0, 6)

三角删的绘制规律是,已三角形的第三条边的反方向为七点

image.png