--- title: WebGLRenderingContext.canvas slug: Web/API/WebGLRenderingContext/canvas tags: - WebGL - WebGLRenderingContext - 只读 - 属性 translation_of: Web/API/WebGLRenderingContext/canvas --- <div>{{APIRef("WebGL")}}</div> <p><code><strong>WebGLRenderingContext.canvas</strong></code> 只读属性,对 {{domxref("HTMLCanvasElement")}} 和 {{domxref("OffscreenCanvas")}} 对象的引用。如果绘图上下文没有相关联的 {{HTMLElement("canvas")}} 元素或 {{domxref("OffscreenCanvas")}} 对象,值为 {{jsxref("null")}}。</p> <h2 id="语法">语法</h2> <pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre> <h3 id="返回值">返回值</h3> <p>{{domxref("HTMLCanvasElement")}} 或 {{domxref("OffscreenCanvas")}} 或 {{jsxref("null")}}。</p> <h2 id="示例">示例</h2> <h3 id="Canvas_元素">Canvas 元素</h3> <p>指定 {{HTMLElement("canvas")}} 元素:</p> <pre class="brush: html"><canvas id="canvas"></canvas> </pre> <p>你可以通过 canvas 得到一个从 <code>WebGLRenderingContext </code>返回的引用:</p> <pre class="brush: js">var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl"); gl.canvas; // HTMLCanvasElement </pre> <h3 id="离屏Canvas">离屏Canvas</h3> <p>下面是一个使用试验阶段 {{domxref("OffscreenCanvas")}} 对象的示例:</p> <pre class="brush: js">var offscreen = new OffscreenCanvas(256, 256); var gl = offscreen.getContext("webgl"); gl.canvas; // OffscreenCanvas</pre> <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', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td> <td>{{Spec2('WebGL')}}</td> <td>初始定义</td> </tr> </tbody> </table> <h2 id="浏览器兼容性">浏览器兼容性</h2> <p>{{Compat("api.WebGLRenderingContext.canvas")}}</p> <h2 id="相关链接">相关链接</h2> <ul> <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li> <li>{{domxref("OffscreenCanvas")}}</li> </ul>