在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

WebGLRenderingContext.viewport() 方法在 WebGL API sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.

句法

void gl.viewport(x, y, width, height);
					

参数

x

GLint specifying the horizontal coordinate for the lower left corner of the viewport origin. Default value: 0.

y

GLint specifying the vertical coordinate for the lower left corner of the viewport origin. Default value: 0.

width

A non-negative Glsizei specifying the width of the viewport. Default value: width of the canvas.

height

A non-negative Glsizei specifying the height of the viewport. Default value: height of the canvas.

返回值

None.

Errors thrown

若 width or height is a negative value, a gl.INVALID_VALUE error is thrown.

范例

When you first create a WebGL context, the size of the viewport will match the size of the canvas. However, if you resize the canvas, you will need to tell the WebGL context a new viewport setting. In this situation, you can use gl.viewport .

gl.viewport(0, 0, canvas.width, canvas.height);
					

The viewport width and height are clamped to a range that is implementation dependent. To get this range, you can use the MAX_VIEWPORT_DIMS constant, which returns an Int32Array .

gl.getParameter(gl.MAX_VIEWPORT_DIMS);
// e.g. Int32Array[16384, 16384]
					

To get the current viewport, query the VIEWPORT 常量。

gl.getParameter(gl.VIEWPORT);
// e.g. Int32Array[0, 0, 640, 480]
					

规范

规范	状态	注释
WebGL 1.0 The definition of 'viewport' in that specification.	推荐	初始定义。
OpenGL ES 2.0 The definition of 'glViewport' in that specification.	标准	Man page of the OpenGL API.

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
viewport	Chrome 9	Edge 12	Firefox 4	IE 11	Opera 12	Safari 5.1	WebView Android Yes	Chrome Android 25	Firefox Android Yes	Opera Android 12	Safari iOS 8	Samsung Internet Android 1.5

图例

完整支持

完整支持

另请参阅

• WebGLRenderingContext.scissor()
• WebGLRenderingContext.getParameter()

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

1. WebGL API
2. WebGLRenderingContext
3. 特性

   1. canvas
   2. drawingBufferHeight
   3. drawingBufferWidth
4. 方法

   1. activeTexture()
   2. attachShader()
   3. bindAttribLocation()
   4. bindBuffer()
   5. bindFramebuffer()
   6. bindRenderbuffer()
   7. bindTexture()
   8. blendColor()
   9. blendEquation()
   10. blendEquationSeparate()
   11. blendFunc()
   12. blendFuncSeparate()
   13. bufferData()
   14. bufferSubData()
   15. checkFramebufferStatus()
   16. clear()
   17. clearColor()
   18. clearDepth()
   19. clearStencil()
   20. colorMask()
   21. commit()
   22. compileShader()
   23. compressedTexImage[23]D()
   24. compressedTexSubImage2D()
   25. copyTexImage2D()
   26. copyTexSubImage2D()
   27. createBuffer()
   28. createFramebuffer()
   29. createProgram()
   30. createRenderbuffer()
   31. createShader()
   32. createTexture()
   33. cullFace()
   34. deleteBuffer()
   35. deleteFramebuffer()
   36. deleteProgram()
   37. deleteRenderbuffer()
   38. deleteShader()
   39. deleteTexture()
   40. depthFunc()
   41. depthMask()
   42. depthRange()
   43. detachShader()
   44. disable()
   45. disableVertexAttribArray()
   46. drawArrays()
   47. drawElements()
   48. enable()
   49. enableVertexAttribArray()
   50. finish()
   51. flush()
   52. framebufferRenderbuffer()
   53. framebufferTexture2D()
   54. frontFace()
   55. generateMipmap()
   56. getActiveAttrib()
   57. getActiveUniform()
   58. getAttachedShaders()
   59. getAttribLocation()
   60. getBufferParameter()
   61. getContextAttributes()
   62. getError()
   63. getExtension()
   64. getFramebufferAttachmentParameter()
   65. getParameter()
   66. getProgramInfoLog()
   67. getProgramParameter()
   68. getRenderbufferParameter()
   69. getShaderInfoLog()
   70. getShaderParameter()
   71. getShaderPrecisionFormat()
   72. getShaderSource()
   73. getSupportedExtensions()
   74. getTexParameter()
   75. getUniform()
   76. getUniformLocation()
   77. getVertexAttrib()
   78. getVertexAttribOffset()
   79. hint()
   80. isBuffer()
   81. isContextLost()
   82. isEnabled()
   83. isFramebuffer()
   84. isProgram()
   85. isRenderbuffer()
   86. isShader()
   87. isTexture()
   88. lineWidth()
   89. linkProgram()
   90. pixelStorei()
   91. polygonOffset()
   92. readPixels()
   93. renderbufferStorage()
   94. sampleCoverage()
   95. scissor()
   96. shaderSource()
   97. stencilFunc()
   98. stencilFuncSeparate()
   99. stencilMask()
   100. stencilMaskSeparate()
   101. stencilOp()
   102. stencilOpSeparate()
   103. texImage2D()
   104. texParameter[fi]()
   105. texSubImage2D()
   106. uniform[1234][fi][v]()
   107. uniformMatrix[234]fv()
   108. useProgram()
   109. validateProgram()
   110. vertexAttrib[1234]f[v]()
   111. vertexAttribPointer()
   112. viewport()
5. WebGL 相关页面

   1. ANGLE_instanced_arrays
   2. EXT_blend_minmax
   3. EXT_color_buffer_half_float
   4. EXT_disjoint_timer_query
   5. EXT_frag_depth
   6. EXT_sRGB
   7. EXT_shader_texture_lod
   8. EXT_texture_filter_anisotropic
   9. OES_element_index_uint
   10. OES_standard_derivatives
   11. OES_texture_float
   12. OES_texture_float_linear
   13. OES_texture_half_float
   14. OES_texture_half_float_linear
   15. OES_vertex_array_object
   16. WEBGL_color_buffer_float
   17. WEBGL_compressed_texture_atc
   18. WEBGL_compressed_texture_etc1
   19. WEBGL_compressed_texture_pvrtc
   20. WEBGL_compressed_texture_s3tc
   21. WEBGL_compressed_texture_s3tc_srgb
   22. WEBGL_debug_renderer_info
   23. WEBGL_debug_shaders
   24. WEBGL_depth_texture
   25. WEBGL_draw_buffers
   26. WEBGL_lose_context
   27. WebGL2RenderingContext
   28. WebGLActiveInfo
   29. WebGLBuffer
   30. WebGLContextEvent
   31. WebGLFramebuffer
   32. WebGLObject
   33. WebGLProgram
   34. WebGLQuery
   35. WebGLRenderbuffer
   36. WebGLSampler
   37. WebGLShader
   38. WebGLShaderPrecisionFormat
   39. WebGLSync
   40. WebGLTexture
   41. WebGLTransformFeedback
   42. WebGLUniformLocation
   43. WebGLVertexArrayObject