WebGLRenderingContext
WebGLRenderingContext
WebGLRenderingContext 接口提供基于 OpenGL ES 2.0 的绘图上下文，用于在 HTML 元素内绘图。
要获得这个接口的对象，可以通过在 元素上调用 getContext() 函数，调用时传入 “webgl” 参数：
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');
当你获取到 canvas 元素的 WebGL 绘图上下文，你便可以在里面绘图。
WebGLRenderingContext
深入了解webgl接口参数
gl.drawArrays
void gl.drawArrays(mode, first, count);
mode
GLenum 类型，指定绘制图元的方式，可能值如下。
gl.POINTS: 绘制一系列点。
gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
gl.TRIANGLE_STRIP：绘制一个三角带。
gl.TRIANGLE_FAN：绘制一个三角扇。
gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。
first
GLint 类型 ，指定从哪个点开始绘制。
count
GLsizei 类型，指定绘制需要使用到多少个点。
296个属性，139个方法。
- ACTIVE_ATTRIBUTES: 35721
- ACTIVE_TEXTURE: 34016
- ACTIVE_UNIFORMS: 35718
- ALIASED_LINE_WIDTH_RANGE: 33902
- ALIASED_POINT_SIZE_RANGE: 33901
- ALPHA: 6406
- ALPHA_BITS: 3413
- ALWAYS: 519
- ARRAY_BUFFER: 34962
- ARRAY_BUFFER_BINDING: 34964
- ATTACHED_SHADERS: 35717
- BACK: 1029
- BLEND: 3042
- BLEND_COLOR: 32773
- BLEND_DST_ALPHA: 32970
- BLEND_DST_RGB: 32968
- BLEND_EQUATION: 32777
- BLEND_EQUATION_ALPHA: 34877
- BLEND_EQUATION_RGB: 32777
- BLEND_SRC_ALPHA: 32971
- BLEND_SRC_RGB: 32969
- BLUE_BITS: 3412
- BOOL: 35670
- BOOL_VEC2: 35671
- BOOL_VEC3: 35672
- BOOL_VEC4: 35673
- BROWSER_DEFAULT_WEBGL: 37444
- BUFFER_SIZE: 34660
- BUFFER_USAGE: 34661
- BYTE: 5120
- CCW: 2305
- CLAMP_TO_EDGE: 33071
- COLOR_ATTACHMENT0: 36064
- COLOR_BUFFER_BIT: 16384
- COLOR_CLEAR_VALUE: 3106
- COLOR_WRITEMASK: 3107
- COMPILE_STATUS: 35713
- COMPRESSED_TEXTURE_FORMATS: 34467
- CONSTANT_ALPHA: 32771
- CONSTANT_COLOR: 32769
- CONTEXT_LOST_WEBGL: 37442
- CULL_FACE: 2884
- CULL_FACE_MODE: 2885
- CURRENT_PROGRAM: 35725
- CURRENT_VERTEX_ATTRIB: 34342
- CW: 2304
- DECR: 7683
- DECR_WRAP: 34056
- DELETE_STATUS: 35712
- DEPTH_ATTACHMENT: 36096
- DEPTH_BITS: 3414
- DEPTH_BUFFER_BIT: 256
- DEPTH_CLEAR_VALUE: 2931
- DEPTH_COMPONENT: 6402
- DEPTH_COMPONENT16: 33189
- DEPTH_FUNC: 2932
- DEPTH_RANGE: 2928
- DEPTH_STENCIL: 34041
- DEPTH_STENCIL_ATTACHMENT: 33306
- DEPTH_TEST: 2929
- DEPTH_WRITEMASK: 2930
- DITHER: 3024
- DONT_CARE: 4352
- DST_ALPHA: 772
- DST_COLOR: 774
- DYNAMIC_DRAW: 35048
- ELEMENT_ARRAY_BUFFER: 34963
- ELEMENT_ARRAY_BUFFER_BINDING: 34965
- EQUAL: 514
- FASTEST: 4353
- FLOAT: 5126
- FLOAT_MAT2: 35674
- FLOAT_MAT3: 35675
- FLOAT_MAT4: 35676
- FLOAT_VEC2: 35664
- FLOAT_VEC3: 35665
- FLOAT_VEC4: 35666
- FRAGMENT_SHADER: 35632
- FRAMEBUFFER: 36160
- FRAMEBUFFER_ATTACHMENT_OBJECT_NAME: 36049
- FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE: 36048
- FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE: 36051
- FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL: 36050
- FRAMEBUFFER_BINDING: 36006
- FRAMEBUFFER_COMPLETE: 36053
- FRAMEBUFFER_INCOMPLETE_ATTACHMENT: 36054
- FRAMEBUFFER_INCOMPLETE_DIMENSIONS: 36057
- FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: 36055
- FRAMEBUFFER_UNSUPPORTED: 36061
- FRONT: 1028
- FRONT_AND_BACK: 1032
- FRONT_FACE: 2886
- FUNC_ADD: 32774
- FUNC_REVERSE_SUBTRACT: 32779
- FUNC_SUBTRACT: 32778
- GENERATE_MIPMAP_HINT: 33170
- GEQUAL: 518
- GREATER: 516
- GREEN_BITS: 3411
- HIGH_FLOAT: 36338
- HIGH_INT: 36341
- IMPLEMENTATION_COLOR_READ_FORMAT: 35739
- IMPLEMENTATION_COLOR_READ_TYPE: 35738
- INCR: 7682
- INCR_WRAP: 34055
- INT: 5124
- INT_VEC2: 35667
- INT_VEC3: 35668
- INT_VEC4: 35669
- INVALID_ENUM: 1280
- INVALID_FRAMEBUFFER_OPERATION: 1286
- INVALID_OPERATION: 1282
- INVALID_VALUE: 1281
- INVERT: 5386
- KEEP: 7680
- LEQUAL: 515
- LESS: 513
- LINEAR: 9729
- LINEAR_MIPMAP_LINEAR: 9987
- LINEAR_MIPMAP_NEAREST: 9985
- LINES: 1
- LINE_LOOP: 2
- LINE_STRIP: 3
- LINE_WIDTH: 2849
- LINK_STATUS: 35714
- LOW_FLOAT: 36336
- LOW_INT: 36339
- LUMINANCE: 6409
- LUMINANCE_ALPHA: 6410
- MAX_COMBINED_TEXTURE_IMAGE_UNITS: 35661
- MAX_CUBE_MAP_TEXTURE_SIZE: 34076
- MAX_FRAGMENT_UNIFORM_VECTORS: 36349
- MAX_RENDERBUFFER_SIZE: 34024
- MAX_TEXTURE_IMAGE_UNITS: 34930
- MAX_TEXTURE_SIZE: 3379
- MAX_VARYING_VECTORS: 36348
- MAX_VERTEX_ATTRIBS: 34921
- MAX_VERTEX_TEXTURE_IMAGE_UNITS: 35660
- MAX_VERTEX_UNIFORM_VECTORS: 36347
- MAX_VIEWPORT_DIMS: 3386
- MEDIUM_FLOAT: 36337
- MEDIUM_INT: 36340
- MIRRORED_REPEAT: 33648
- NEAREST: 9728
- NEAREST_MIPMAP_LINEAR: 9986
- NEAREST_MIPMAP_NEAREST: 9984
- NEVER: 512
- NICEST: 4354
- NONE: 0
- NOTEQUAL: 517
- NO_ERROR: 0
- ONE: 1
- ONE_MINUS_CONSTANT_ALPHA: 32772
- ONE_MINUS_CONSTANT_COLOR: 32770
- ONE_MINUS_DST_ALPHA: 773
- ONE_MINUS_DST_COLOR: 775
- ONE_MINUS_SRC_ALPHA: 771
- ONE_MINUS_SRC_COLOR: 769
- OUT_OF_MEMORY: 1285
- PACK_ALIGNMENT: 3333
- POINTS: 0
- POLYGON_OFFSET_FACTOR: 32824
- POLYGON_OFFSET_FILL: 32823
- POLYGON_OFFSET_UNITS: 10752
- RED_BITS: 3410
- RENDERBUFFER: 36161
- RENDERBUFFER_ALPHA_SIZE: 36179
- RENDERBUFFER_BINDING: 36007
- RENDERBUFFER_BLUE_SIZE: 36178
- RENDERBUFFER_DEPTH_SIZE: 36180
- RENDERBUFFER_GREEN_SIZE: 36177
- RENDERBUFFER_HEIGHT: 36163
- RENDERBUFFER_INTERNAL_FORMAT: 36164
- RENDERBUFFER_RED_SIZE: 36176
- RENDERBUFFER_STENCIL_SIZE: 36181
- RENDERBUFFER_WIDTH: 36162
- RENDERER: 7937
- REPEAT: 10497
- REPLACE: 7681
- RGB: 6407
- RGB565: 36194
- RGB5_A1: 32855
- RGBA: 6408
- RGBA4: 32854
- SAMPLER_2D: 35678
- SAMPLER_CUBE: 35680
- SAMPLES: 32937
- SAMPLE_ALPHA_TO_COVERAGE: 32926
- SAMPLE_BUFFERS: 32936
- SAMPLE_COVERAGE: 32928
- SAMPLE_COVERAGE_INVERT: 32939
- SAMPLE_COVERAGE_VALUE: 32938
- SCISSOR_BOX: 3088
- SCISSOR_TEST: 3089
- SHADER_TYPE: 35663
- SHADING_LANGUAGE_VERSION: 35724
- SHORT: 5122
- SRC_ALPHA: 770
- SRC_ALPHA_SATURATE: 776
- SRC_COLOR: 768
- STATIC_DRAW: 35044
- STENCIL_ATTACHMENT: 36128
- STENCIL_BACK_FAIL: 34817
- STENCIL_BACK_FUNC: 34816
- STENCIL_BACK_PASS_DEPTH_FAIL: 34818
- STENCIL_BACK_PASS_DEPTH_PASS: 34819
- STENCIL_BACK_REF: 36003
- STENCIL_BACK_VALUE_MASK: 36004
- STENCIL_BACK_WRITEMASK: 36005
- STENCIL_BITS: 3415
- STENCIL_BUFFER_BIT: 1024
- STENCIL_CLEAR_VALUE: 2961
- STENCIL_FAIL: 2964
- STENCIL_FUNC: 2962
- STENCIL_INDEX8: 36168
- STENCIL_PASS_DEPTH_FAIL: 2965
- STENCIL_PASS_DEPTH_PASS: 2966
- STENCIL_REF: 2967
- STENCIL_TEST: 2960
- STENCIL_VALUE_MASK: 2963
- STENCIL_WRITEMASK: 2968
- STREAM_DRAW: 35040
- SUBPIXEL_BITS: 3408
- TEXTURE: 5890
- TEXTURE0: 33984
- TEXTURE1: 33985
- TEXTURE10: 33994
- TEXTURE11: 33995
- TEXTURE12: 33996
- TEXTURE13: 33997
- TEXTURE14: 33998
- TEXTURE15: 33999
- TEXTURE16: 34000
- TEXTURE17: 34001
- TEXTURE18: 34002
- TEXTURE19: 34003
- TEXTURE2: 33986
- TEXTURE20: 34004
- TEXTURE21: 34005
- TEXTURE22: 34006
- TEXTURE23: 34007
- TEXTURE24: 34008
- TEXTURE25: 34009
- TEXTURE26: 34010
- TEXTURE27: 34011
- TEXTURE28: 34012
- TEXTURE29: 34013
- TEXTURE3: 33987
- TEXTURE30: 34014
- TEXTURE31: 34015
- TEXTURE4: 33988
- TEXTURE5: 33989
- TEXTURE6: 33990
- TEXTURE7: 33991
- TEXTURE8: 33992
- TEXTURE9: 33993
- TEXTURE_2D: 3553
- TEXTURE_BINDING_2D: 32873
- TEXTURE_BINDING_CUBE_MAP: 34068
- TEXTURE_CUBE_MAP: 34067
- TEXTURE_CUBE_MAP_NEGATIVE_X: 34070
- TEXTURE_CUBE_MAP_NEGATIVE_Y: 34072
- TEXTURE_CUBE_MAP_NEGATIVE_Z: 34074
- TEXTURE_CUBE_MAP_POSITIVE_X: 34069
- TEXTURE_CUBE_MAP_POSITIVE_Y: 34071
- TEXTURE_CUBE_MAP_POSITIVE_Z: 34073
- TEXTURE_MAG_FILTER: 10240
- TEXTURE_MIN_FILTER: 10241
- TEXTURE_WRAP_S: 10242
- TEXTURE_WRAP_T: 10243
- TRIANGLES: 4
- TRIANGLE_FAN: 6
- TRIANGLE_STRIP: 5
- UNPACK_ALIGNMENT: 3317
- UNPACK_COLORSPACE_CONVERSION_WEBGL: 37443
- UNPACK_FLIP_Y_WEBGL: 37440
- UNPACK_PREMULTIPLY_ALPHA_WEBGL: 37441
- UNSIGNED_BYTE: 5121
- UNSIGNED_INT: 5125
- UNSIGNED_SHORT: 5123
- UNSIGNED_SHORT_4_4_4_4: 32819
- UNSIGNED_SHORT_5_5_5_1: 32820
- UNSIGNED_SHORT_5_6_5: 33635
- VALIDATE_STATUS: 35715
- VENDOR: 7936
- VERSION: 7938
- VERTEX_ATTRIB_ARRAY_BUFFER_BINDING: 34975
- VERTEX_ATTRIB_ARRAY_ENABLED: 34338
- VERTEX_ATTRIB_ARRAY_NORMALIZED: 34922
- VERTEX_ATTRIB_ARRAY_POINTER: 34373
- VERTEX_ATTRIB_ARRAY_SIZE: 34339
- VERTEX_ATTRIB_ARRAY_STRIDE: 34340
- VERTEX_ATTRIB_ARRAY_TYPE: 34341
- VERTEX_SHADER: 35633
- VIEWPORT: 2978
- ZERO: 0
- activeTexture: function activeTexture()
- attachShader: function attachShader()
- bindAttribLocation: function bindAttribLocation()
- bindBuffer: function bindBuffer()
- bindFramebuffer: function bindFramebuffer()
- bindRenderbuffer: function bindRenderbuffer()
- bindTexture: function bindTexture()
- blendColor: function blendColor()
- blendEquation: function blendEquation()
- blendEquationSeparate: function blendEquationSeparate()
- blendFunc: function blendFunc()
- blendFuncSeparate: function blendFuncSeparate()
- bufferData: function bufferData()
- bufferSubData: function bufferSubData()
- canvas:
- checkFramebufferStatus: function checkFramebufferStatus()
- clear: function clear()
- clearColor: function clearColor()
- clearDepth: function clearDepth()
- clearStencil: function clearStencil()
- colorMask: function colorMask()
- compileShader: function compileShader()
- compressedTexImage2D: function compressedTexImage2D()
- compressedTexSubImage2D: function compressedTexSubImage2D()
- constructor: function ()
- copyTexImage2D: function copyTexImage2D()
- copyTexSubImage2D: function copyTexSubImage2D()
- createBuffer: function createBuffer()
- createFramebuffer: function createFramebuffer()
- createProgram: function createProgram()
- createRenderbuffer: function createRenderbuffer()
- createShader: function createShader()
- createTexture: function createTexture()
- cullFace: function cullFace()
- deleteBuffer: function deleteBuffer()
- deleteFramebuffer: function deleteFramebuffer()
- deleteProgram: function deleteProgram()
- deleteRenderbuffer: function deleteRenderbuffer()
- deleteShader: function deleteShader()
- deleteTexture: function deleteTexture()
- depthFunc: function depthFunc()
- depthMask: function depthMask()
- depthRange: function depthRange()
- detachShader: function detachShader()
- disable: function disable()
- disableVertexAttribArray: function disableVertexAttribArray()
- drawArrays: function drawArrays()
- drawElements: function drawElements()
- drawingBufferHeight:
- drawingBufferWidth:
- enable: function enable()
- enableVertexAttribArray: function enableVertexAttribArray()
- finish: function finish()
- flush: function flush()
- framebufferRenderbuffer: function framebufferRenderbuffer()
- framebufferTexture2D: function framebufferTexture2D()
- frontFace: function frontFace()
- generateMipmap: function generateMipmap()
- getActiveAttrib: function getActiveAttrib()
- getActiveUniform: function getActiveUniform()
- getAttachedShaders: function getAttachedShaders()
- getAttribLocation: function getAttribLocation()
- getBufferParameter: function getBufferParameter()
- getContextAttributes: function getContextAttributes()
- getError: function getError()
- getExtension: function getExtension()
- getFramebufferAttachmentParameter: function getFramebufferAttachmentParameter()
- getParameter: function getParameter()
- getProgramInfoLog: function getProgramInfoLog()
- getProgramParameter: function getProgramParameter()
- getRenderbufferParameter: function getRenderbufferParameter()
- getShaderInfoLog: function getShaderInfoLog()
- getShaderParameter: function getShaderParameter()
- getShaderPrecisionFormat: function getShaderPrecisionFormat()
- getShaderSource: function getShaderSource()
- getSupportedExtensions: function getSupportedExtensions()
- getTexParameter: function getTexParameter()
- getUniform: function getUniform()
- getUniformLocation: function getUniformLocation()
- getVertexAttrib: function getVertexAttrib()
- getVertexAttribOffset: function getVertexAttribOffset()
- hint: function hint()
- isBuffer: function isBuffer()
- isContextLost: function isContextLost()
- isEnabled: function isEnabled()
- isFramebuffer: function isFramebuffer()
- isProgram: function isProgram()
- isRenderbuffer: function isRenderbuffer()
- isShader: function isShader()
- isTexture: function isTexture()
- lineWidth: function lineWidth()
- linkProgram: function linkProgram()
- pixelStorei: function pixelStorei()
- polygonOffset: function polygonOffset()
- readPixels: function readPixels()
- renderbufferStorage: function renderbufferStorage()
- sampleCoverage: function sampleCoverage()
- scissor: function scissor()
- shaderSource: function shaderSource()
- stencilFunc: function stencilFunc()
- stencilFuncSeparate: function stencilFuncSeparate()
- stencilMask: function stencilMask()
- stencilMaskSeparate: function stencilMaskSeparate()
- stencilOp: function stencilOp()
- stencilOpSeparate: function stencilOpSeparate()
- texImage2D: function texImage2D()
- texParameterf: function texParameterf()
- texParameteri: function texParameteri()
- texSubImage2D: function texSubImage2D()
- uniform1f: function uniform1f()
- uniform1fv: function uniform1fv()
- uniform1i: function uniform1i()
- uniform1iv: function uniform1iv()
- uniform2f: function uniform2f()
- uniform2fv: function uniform2fv()
- uniform2i: function uniform2i()
- uniform2iv: function uniform2iv()
- uniform3f: function uniform3f()
- uniform3fv: function uniform3fv()
- uniform3i: function uniform3i()
- uniform3iv: function uniform3iv()
- uniform4f: function uniform4f()
- uniform4fv: function uniform4fv()
- uniform4i: function uniform4i()
- uniform4iv: function uniform4iv()
- uniformMatrix2fv: function uniformMatrix2fv()
- uniformMatrix3fv: function uniformMatrix3fv()
- uniformMatrix4fv: function uniformMatrix4fv()
- useProgram: function useProgram()
- validateProgram: function validateProgram()
- vertexAttrib1f: function vertexAttrib1f()
- vertexAttrib1fv: function vertexAttrib1fv()
- vertexAttrib2f: function vertexAttrib2f()
- vertexAttrib2fv: function vertexAttrib2fv()
- vertexAttrib3f: function vertexAttrib3f()
- vertexAttrib3fv: function vertexAttrib3fv()
- vertexAttrib4f: function vertexAttrib4f()
- vertexAttrib4fv: function vertexAttrib4fv()
- vertexAttribPointer: function vertexAttribPointer()
- viewport: function viewport()