aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/webglrenderingcontext/index.html
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/webglrenderingcontext/index.html
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/api/webglrenderingcontext/index.html')
-rw-r--r--files/zh-cn/web/api/webglrenderingcontext/index.html367
1 files changed, 367 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/webglrenderingcontext/index.html b/files/zh-cn/web/api/webglrenderingcontext/index.html
new file mode 100644
index 0000000000..35b83bd3dc
--- /dev/null
+++ b/files/zh-cn/web/api/webglrenderingcontext/index.html
@@ -0,0 +1,367 @@
+---
+title: WebGLRenderingContext
+slug: Web/API/WebGLRenderingContext
+tags:
+ - WebGL
+ - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><strong>WebGLRenderingContext</strong> 接口提供基于 OpenGL ES 2.0 的绘图上下文,用于在 HTML {{HTMLElement("canvas")}} 元素内绘图。 </p>
+
+<p>要获得这个接口的对象,可以通过在 <code>&lt;canvas&gt; 元素上调用 </code>{{domxref("HTMLCanvasElement.getContext()", "getContext()")}} 函数,调用时传入 “webgl” 参数:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+</pre>
+
+<p>当你获取到 canvas 元素的 WebGL 绘图上下文,你便可以在里面绘图。</p>
+
+<p>点击 <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> 获取更多资料,例子,和关于如何开始WebGL编程的知识。</p>
+
+<blockquote>
+<p>补充:以下内容很多函数都没有提供参数,所以最好还是参见具体API。</p>
+</blockquote>
+
+<h2 id="常量">常量</h2>
+
+<p>请参考 <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> 。</p>
+
+<h2 id="WebGL上下文">WebGL上下文</h2>
+
+<p>以下的属性和方法提供只读的关于上下文的信息:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt>
+ <dd>只读属性,对 {{domxref("HTMLCanvasElement")}} 的向后引用。如果上下文没有相联系的 {{HTMLElement("canvas")}} 元素,值将会为 {{jsxref("null")}}。</dd>
+ <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>如果上下文没有指定的canvas,把帧交给原始的{{domxref("HTMLCanvasElement")}}元素。</p>
+ </dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt>
+ <dd>只读属性,当前绘图缓冲区的宽度,等于和该上下文相联系的 canvas 元素的宽度。</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt>
+ <dd>只读属性,当前绘图缓冲区的高度,等于和该上下文相联系的 canvas 元素的高度。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt>
+ <dd>返回 <code>WebGLContextAttributes 对象,该对象包含真实的上下文参数。如果上下文丢失,将会返回</code> {{jsxref("null")}}。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt>
+ <dd>如果上下文丢失,返回true;否则,返回 false。</dd>
+</dl>
+
+<h2 id="视野和裁剪">视野和裁剪</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt>
+ <dd>设置裁剪框。</dd>
+ <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt>
+ <dd>设置视口。</dd>
+</dl>
+
+<h2 id="状态信息">状态信息</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt>
+ <dd>选择要激活的纹理单元。</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt>
+ <dd>设置源和目标的混和因子。</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt>
+ <dd>用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt>
+ <dd>分开设置 RGB 混和表达式和 alpha 混和表达式。</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt>
+ <dd>定义用于像素混合算法的函数。</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt>
+ <dd>分别定义混合像素RGB通道和透明通道的函数。</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt>
+ <dd>设置用于清空用的颜色。</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt>
+ <dd>设置清除深度缓存时的深度值。</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt>
+ <dd>设置清除模板缓冲区时的模板值。</dd>
+ <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt>
+ <dd>设置在绘制或渲染{{domxref("WebGLFramebuffer")}}时要开启或关闭的颜色分量。</dd>
+ <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt>
+ <dd>设置多边形的正面和/或反面是否要被排除。</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt>
+ <dd>设置比较输入像素深度和深度缓存值得函数。</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt>
+ <dd>设置是否写入深度缓存。</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt>
+ <dd>设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。</dd>
+ <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt>
+ <dd>禁用这个上下文的WebGL功能。</dd>
+ <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt>
+ <dd>启用这个上下文的WebGL功能。</dd>
+ <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt>
+ <dd>设置多边形的正面使用顺时针还是逆时针绘制表示。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt>
+ <dd>返回给入参数名的值。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt>
+ <dd>返回错误信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt>
+ <dd>给某些行为设置建议使用的模式。具体建议需要看执行的情况。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt>
+ <dd>测试这个上下文的WebGL功能是否开启。</dd>
+ <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt>
+ <dd>设置线宽。</dd>
+ <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt>
+ <dd>设置像素存储模式。</dd>
+ <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt>
+ <dd>设置多边形偏移的比例和单位,从而计算深度值。(补充:解决深度冲突)</dd>
+ <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt>
+ <dd>为抗锯齿效果设置多重取样覆盖参数。</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt>
+ <dd>同时设置前面和背面的模板测试函数,及其引用值。</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt>
+ <dd>可分开设置前面或背面的模板测试函数,及其引用值。</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt>
+ <dd>同时启用或禁用,前面和背面的模板测试掩码。</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt>
+ <dd>可分开启用或禁用,前面和背面的模板测试掩码。</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt>
+ <dd>同时设置,在前面和背面的模板缓冲区上执行的操作。</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt>
+ <dd>可分开设置,在前面和背面的模板缓冲区上执行的操作。</dd>
+</dl>
+
+<h2 id="缓冲区">缓冲区</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt>
+ <dd>把 <code>WebGLBuffer</code> 对象绑定到指定目标上。</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt>
+ <dd>更新缓冲数据。</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt>
+ <dd>更新从给入偏移量开始的缓冲数据。</dd>
+ <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt>
+ <dd>创建 <code>WebGLBuffer</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt>
+ <dd>删除 <code>WebGLBuffer</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt>
+ <dd>返回缓冲信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
+ <dd>返回给入的缓冲是否有效。</dd>
+</dl>
+
+<h2 id="帧缓冲区">帧缓冲区</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt>
+ <dd>把 <code>WebGLFrameBuffer</code> 对象绑定到指定对象上。</dd>
+ <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt>
+ <dd>返回帧缓冲区的状态。</dd>
+ <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt>
+ <dd>创建 <code>WebGLFrameBuffer</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt>
+ <dd>删除 <code>WebGLFrameBuffer</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt>
+ <dd>把 <code>WebGLRenderingBuffer</code> 对象附加到 <code>WebGLFrameBuffer</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt>
+ <dd>把纹理图像附加到 <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt>
+ <dd>返回帧缓冲区的信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt>
+ <dd>返回 Boolean 值,表示给入的 <code>WebGLFrameBuffer</code> 对象是否有效。</dd>
+ <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt>
+ <dd>读取 <code>WebGLFrameBuffer 的像素。</code></dd>
+</dl>
+
+<h2 id="渲染缓冲区">渲染缓冲区</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt>
+ <dd>把 <code>WebGLRenderBuffer</code> 对象绑定到指定的对象上。</dd>
+ <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt>
+ <dd>创建 <code>WebGLRenderBuffer</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt>
+ <dd>删除 <code>WebGLRenderBuffer</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt>
+ <dd>返回渲染缓冲区的信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
+ <dd>返回 Boolean 值,表示给入的 <code>WebGLRenderingBuffer</code> 是否有效。</dd>
+ <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt>
+ <dd>创建渲染缓冲区数据存储。</dd>
+</dl>
+
+<h2 id="纹理">纹理</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt>
+ <dd>把 <code>WebGLTexture</code> 对象绑定到指定对象上。</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt>
+ <dd>指定一个为压缩格式的2D纹理图片。</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt>
+ <dd>指定一个为压缩格式的2D纹理子图片。</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt>
+ <dd>复制2D纹理图片。</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt>
+ <dd>复制2D纹理子图片。</dd>
+ <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt>
+ <dd>创建 <code>WebGLTexture</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt>
+ <dd>删除 <code>WebGLTexture</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt>
+ <dd>为 <code>WebGLTexture</code> 对象生成一组纹理映射。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt>
+ <dd>返回纹理信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt>
+ <dd>返回 Boolean 值,表示给入的 <code>WebGLTexture</code> 是否有效。</dd>
+ <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt>
+ <dd>指定2D纹理图片。</dd>
+ <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt>
+ <dd>更新当前 <code>WebGLTexture 的子矩形。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameterf()")}}</dt>
+ <dd>设置纹理参数。</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameteri()")}}</dt>
+ <dd>设置纹理参数。</dd>
+</dl>
+
+<h2 id="程序对象和着色器对象">程序对象和着色器对象</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt>
+ <dd>把 <code>WebGLShader</code> 添加到 <code>WebGLProgram。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt>
+ <dd>绑定一个普通顶点索引到一个命名的attribute 变量</dd>
+ <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt>
+ <dd>编译 <code>WebGLShader。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt>
+ <dd>创建 <code>WebGLProgram。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt>
+ <dd>创建 <code>WebGLShader。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt>
+ <dd>删除 <code>WebGLProgram。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt>
+ <dd>删除 <code>WebGLShader。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt>
+ <dd>分离 <code>WebGLShader。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt>
+ <dd>返回附加在 <code>WebGLProgram 上的</code> <code>WebGLShader</code> 对象的列表。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt>
+ <dd>返回程序对象的信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt>
+ <dd>返回 <code>WebGLProgram </code>对象的信息日志。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt>
+ <dd>返回着色器的信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt>
+ <dd>返回一个描述着色器数字类型精度的<code>WebGLShaderPrecisionFormat</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt>
+ <dd>返回 <code>WebGLShader</code> 对象的信息日志。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt>
+ <dd>以字符串形式返回 <code>WebGLShader</code> 的源码。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt>
+ <dd>返回一个 Boolean 值,表示给入的 <code>WebGLProgram</code> 是否有效。</dd>
+ <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt>
+ <dd>返回一个 Boolean 值,表示给入的 <code>WebGLShader</code> 是否有效。</dd>
+ <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt>
+ <dd>链接给入的 <code>WebGLProgram</code> 对象。</dd>
+ <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt>
+ <dd>设置一个 <code>WebGLShader 的源码。</code></dd>
+ <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt>
+ <dd>使用指定的 <code>WebGLProgram</code> 作为当前渲染状态的一部分。</dd>
+ <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt>
+ <dd>使 <code>WebGLProgram 生效。</code></dd>
+</dl>
+
+<h2 id="Uniform_和_Attribute">Uniform 和 Attribute</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt>
+ <dd>在给定的位置,禁用顶点attribute数组。</dd>
+ <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt>
+ <dd>在给定的位置,启用顶点attribute数组。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt>
+ <dd>返回激活状态的attribute变量信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt>
+ <dd>返回激活状态的uniform 变量信息。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt>
+ <dd>返回attribute变量的指针位置。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt>
+ <dd>返回指定位置的uniform 变量。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt>
+ <dd>返回uniform 变量的指针位置。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt>
+ <dd>返回指定位置的顶点attribute变量。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt>
+ <dd>获取给定索引的顶点attribute位置。</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt>
+ <dd>指定一个uniform变量。</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt>
+ <dd>指定一个uniform矩阵变量。</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt>
+ <dd>指定一个普通顶点attribute的值。</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt>
+ <dd>指定一个顶点attributes 数组中,顶点attributes 变量的数据格式和位置。</dd>
+</dl>
+
+<h2 id="绘制缓冲区">绘制缓冲区</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt>
+ <dd>把指定的缓冲区清空为预设的值。</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt>
+ <dd>渲染数组中的原始数据。</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt>
+ <dd>渲染元素数组中的原始数据。</dd>
+ <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt>
+ <dd>阻断执行,直到之前所有的操作都完成。</dd>
+ <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt>
+ <dd>清空缓冲的命令,这会导致所有命令尽快执行完。</dd>
+</dl>
+
+<h2 id="使用扩展插件">使用扩展插件</h2>
+
+<p>这些方法管理 WebGL 扩展:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt>
+ <dd>返回一个包含 {{domxref("DOMString")}} 的 {{jsxref("Array")}} ,每个元素都为支持的WebGL扩展。</dd>
+ <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt>
+ <dd>返回一个扩展对象。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="检测_WebGL_上下文特性支持">检测 WebGL 上下文特性支持</h3>
+
+<p>{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
+
+<p>{{page("/zh-CN/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
+
+<h3 id="Canvas_尺寸对使用_WebGL_渲染的影响">Canvas 尺寸对使用 WebGL 渲染的影响</h3>
+
+<p>{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
+
+<p>{{page("/zh-CN/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ <tr>
+ <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td>
+ <td>{{Spec2('WebGL')}}</td>
+ <td>原始定义</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}</p>
+
+<h2 id="相关内容">相关内容</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>