initial commit

10 files changed, 1180 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.html b/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..07c0e6820c
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,161 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+tags:
+  - API
+  - Canvas
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p><strong><code>HTMLCanvasElement.getContext()</code></strong> 方法返回{{jsxref("canvas")}} 的上下文，如果上下文没有定义则返回 {{jsxref("null")}} .</p>
+
+<p>在同一个canvas上以相同的 <code>contextType</code> 多次调用此方法只会返回同一个上下文。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>);
+var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>上下文类型（contextType）</dt>
+ <dd>是一个指示使用何种上下文的 {{domxref("DOMString")}} 。可能的值是:
+ <ul>
+  <li><code>"2d</code>", 建立一个 {{domxref("CanvasRenderingContext2D")}} 二维渲染上下文。</li>
+  <li><code>"webgl"</code> (或<code>"experimental-webgl"</code>) 这将创建一个 {{domxref("WebGLRenderingContext")}} 三维渲染上下文对象。只在实现<a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> 版本1(OpenGL ES 2.0)的浏览器上可用。</li>
+  <li>"<code>webgl2</code>" (或 "<code>experimental-webgl2</code>") 这将创建一个 {{domxref("WebGL2RenderingContext")}} 三维渲染上下文对象。只在实现 <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> 版本2 (OpenGL ES 3.0)的浏览器上可用。{{experimental_inline}}</li>
+  <li><code>"bitmaprenderer"</code> 这将创建一个只提供将canvas内容替换为指定{{domxref("ImageBitmap")}}功能的{{domxref("ImageBitmapRenderingContext")}}  。</li>
+ </ul>
+
+ <div class="blockIndicator note">
+ <p>注意: 标识符 "<code>experimental-webgl</code>" 或 "<code>experimental-webgl2</code>" 用于新 <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a>的实现。 这些实现还没有达到测试套件一致性或图形驱动程序平台局势尚不稳定。<a href="https://www.khronos.org/">Khronos Group</a> 集团认证<a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> 实现在某些<a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">一致性规则</a>。</p>
+ </div>
+ </dd>
+ <dt><code>上下文属性(contextAttributes)</code></dt>
+ <dd>
+ <p>你可以在创建渲染上下文的时候设置多个属性，例如:</p>
+
+ <pre class="brush: js">canvas.getContext("webgl",
+                 { antialias: false,
+                   depth: false });</pre>
+ 2d 上下文属性:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: {{jsxref("boolean")}}值表明{{jsxref("canvas")}}包含一个{{jsxref("alpha")}}通道. 如果设置为{{jsxref("false")}}, 浏览器将认为{{jsxref("canvas")}}背景总是不透明的, 这样可以加速绘制透明的内容和图片.</li>
+  <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: {{jsxref("boolean")}}值表明是否有重复读取计划。经常使用{{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}，这将迫使软件使用2D {{jsxref("canvas")}} 并 节省内存（而不是硬件加速）。这个方案适用于存在属性 <code>gfx.canvas.willReadFrequently</code>的环境。并设置为{{jsxref("true")}} (缺省情况下,只有B2G / Firefox OS).</li>
+  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: {{jsxref("string")}} 这样表示使用哪种方式存储(默认为：持久（"persistent"）).</li>
+ </ul>
+ WebGL上下文属性:
+
+ <ul>
+  <li>
+   <p><strong><code>alpha</code></strong>: {{jsxref("boolean")}}值表明{{jsxref("canvas")}}包含一个{{jsxref("alpha")}}缓冲区。</p>
+  </li>
+  <li>
+   <p><strong><code>antialias</code></strong>: {{jsxref("boolean")}}值表明是否开启抗锯齿。</p>
+  </li>
+  <li>
+   <p><strong><code>depth</code></strong>: {{jsxref("boolean")}}值表明绘制缓冲区包含一个深度至少为16位的缓冲区。</p>
+  </li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: 表明在一个系统性能低的环境是否创建该上下文的{{jsxref("boolean")}}值。</p>
+  </li>
+  <li>
+   <p><code><strong>powerPreference</strong></code>: 指示浏览器在运行WebGL上下文时使用相应的GPU电源配置。 可能值如下:</p>
+
+   <ul>
+    <li>
+     <p><code>"default"</code>:自动选择，默认值。</p>
+    </li>
+    <li>
+     <p><code>"high-performance"</code>: 高性能模式。</p>
+    </li>
+    <li>
+     <p><code>"low-power"</code>: 节能模式。</p>
+    </li>
+   </ul>
+  </li>
+  <li>
+   <p><strong><code>premultipliedAlpha</code></strong>: 表明排版引擎讲假设绘制缓冲区包含预混合alpha通道的{{jsxref("boolean")}}值。</p>
+  </li>
+  <li>
+   <p><strong><code>preserveDrawingBuffer</code></strong>: 如果这个值为{{jsxref("true")}}缓冲区将不会被清除，会保存下来，直到被清除或被使用者覆盖。</p>
+  </li>
+  <li>
+   <p><strong><code>stencil</code></strong>: 表明绘制缓冲区包含一个深度至少为8位的模版缓冲区{{jsxref("boolean")}}值。</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{domxref("RenderingContext")}} 返回值是下列之一：</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} 为 <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} 为<code>"webgl"</code> 和<code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} 为<code>"webgl2"</code> 和<code>"experimental-webgl2"</code>, 或者</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} 为<code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>如果 <code><em>contextType</em></code> 不是上述之一，返回{{jsxref("null")}}.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>定义 {{HTMLElement("canvas")}} 元素:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>通过如下代码可以获取 {{jsxref("canvas")}}<code>2d</code> 上下文:</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>现在你已经获取到了2D 画布的渲染上下文({{domxref("CanvasRenderingContext2D")}})，可以使用它画你想画的了.</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('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
+ <li>可用的上下文: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} 和 {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/height/index.html b/files/zh-cn/web/api/htmlcanvaselement/height/index.html
new file mode 100644
index 0000000000..a479e87d7e
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/height/index.html
@@ -0,0 +1,123 @@
+---
+title: HTMLCanvasElement.height
+slug: Web/API/HTMLCanvasElement/height
+translation_of: Web/API/HTMLCanvasElement/height
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p><strong><code><span>HTMLCanvasElement.height</span></code></strong> 属性是一个正<code>整数</code> ，使用了{{HTMLElement("canvas")}} 元素的HTML 属性{{htmlattrxref("height", "canvas")}}来反映该元素高度的 CSS 像素值。当该属性没有被定义，或被定义为一个无效值（如负值）时， 将使用<code>150</code>作为它的默认值。</p>
+
+<p>控制canvas元素大小的属性有两个，这是其中一个，还有一个是{{domxref("HTMLCanvasElement.width")}}。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height;
+<em>canvas</em>.height = <em>pxl</em>;
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>给出这样一个{{HTMLElement("canvas")}} 元素：</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>可以通过以下代码获得这个canvas元素的高度：</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+console.log(canvas.height); // 300
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(4) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatOpera(9) }}</td>
+   <td>{{ CompatSafari(3.1) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">其他</h2>
+
+<ul>
+ <li>定义的接口, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>另一个控制canvas大小的属性, {{domxref("HTMLCanvasElement.width")}}.</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/index.html b/files/zh-cn/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..0a6e76ff7d
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,92 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+translation_of: Web/API/HTMLCanvasElement
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p><code><strong>HTMLCanvasElement</strong></code>接口提供用于操纵{{HtmlElement("canvas")}}元素的布局和表示的属性和方法。 <code><strong>HTMLCanvasElement</strong></code>接口还继承了{{domxref("HTMLElement")}}接口的属性和方法。</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="属性">属性</h2>
+
+<p><em>从其父项{{domxref("HTMLElement")}}继承属性。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>是一个正整数，反映了{{HTMLElement("canvas")}} 元素的{{htmlattrxref("height", "canvas")}} HTML属性，以CSS像素表示。 如果未指定属性，或者将其设置为无效值（例如负数），则使用默认值150。</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>是一个正整数，反映了{{HTMLElement("canvas")}} 元素的{{htmlattrxref("width", "canvas")}} HTML属性，以CSS像素表示。 如果未指定属性，或者将其设置为无效值（例如负数），则使用默认值300。</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>是反映 {{HTMLElement("canvas")}}元素的{{htmlattrxref("moz-opaque", "canvas")}} 属性的{{jsxref("Boolean")}}。 它让画布知道半透明性是否会成为一个因素。 如果画布知道没有透明感，则可以优化绘画性能。 仅基于Mozilla的浏览器支持此功能， 可以使用标准化的{{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} 代替。</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
+ <dd>是最初为空的函数。 Web内容可以将其设置为JavaScript函数，该函数将在打印页面时重新绘制画布时调用。 调用时，回调将传递一个实现了<a href="https://searchfox.org/mozilla-central/search?q=interface%20MozCanvasPrintState&amp;path=HTMLCanvasElement.webidl">MozCanvasPrintState</a>接口的“ printState”对象。 回调可以从printState对象获取要绘制的上下文，然后必须在完成时在其上调用done() 。 <code>mozPrintCallback</code> 的目的是在所使用打印机的分辨率下获得较高分辨率的画布渲染。 <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">请参阅此博客文章</a>。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>从其父项{{domxref("HTMLElement")}}继承方法。</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>返回{{domxref("CanvasCaptureMediaStream")}} ，它是对画布表面的实时视频捕获。</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>返回画布上的绘图上下文；如果不支持上下文ID，则返回null。 绘图上下文可让您在画布上绘图。 调用getContext传入<code>"2d"</code> 可以返回一个{{domxref("CanvasRenderingContext2D")}}对象，也可以传入<code>"webgl"</code>（或<code>"experimental-webgl"</code>）返回一个{{domxref("WebGLRenderingContext")}} 对象。 此上下文仅在实现<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a>的浏览器上可用。</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>返回一个数据URL，该URL包含由类型参数指定的格式的图像（默认为<code>png</code>）。 返回的图像分辨率为96dpi。</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>创建一个{{domxref("Blob")}} 对象，表示canvas中包含的图像； 该文件可以由用户代理决定是否缓存在磁盘上或存储在内存中。</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>将控制权转移到主线程或辅助线程上的 {{domxref("OffscreenCanvas")}}对象。</dd>
+ <dt>
+ <h3 id="过时的方法">过时的方法</h3>
+ </dt>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>返回代表画布中包含的图像的{{domxref("File")}} 对象； 该文件是基于内存的文件，具有指定的名称。 如果未指定类型，则图像类型为image / png。</dd>
+</dl>
+
+<h2 id="事件">事件</h2>
+
+<p>使用<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>监听这些事件。</p>
+
+<dl>
+ <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event">webglcontextcreationerror</a></code></dt>
+ <dd>如果用户代理无法创建<code>WebGLRenderingContext</code> 或<code>WebGL2RenderingContext</code> 上下文，则触发该事件。</dd>
+ <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event">webglcontextlost</a></code></dt>
+ <dd>如果用户代理检测到与<code>WebGLRenderingContext</code> 或<code>WebGL2RenderingContext</code> 对象关联的绘图缓冲区已丢失，则触发此事件。</dd>
+ <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event">webglcontextrestored</a></code></dt>
+ <dd>如果用户代理为<code>WebGLRenderingContext</code> 或<code>WebGL2RenderingContext</code> 对象恢复绘图缓冲区，则触发该事件。</dd>
+</dl>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlcanvaselement", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Primary definition of <code>HTMLCanvasElement</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#html-canvas-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Adds the method <code>captureStream()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器支持">浏览器支持</h2>
+
+<div class="hidden">
+<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求</p>
+</div>
+
+<p>{{Compat("api.HTMLCanvasElement")}}</p>
+
+<div id="compat-desktop"></div>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/mozopaque/index.html b/files/zh-cn/web/api/htmlcanvaselement/mozopaque/index.html
new file mode 100644
index 0000000000..b82b5718db
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/mozopaque/index.html
@@ -0,0 +1,53 @@
+---
+title: HTMLCanvasElement.mozOpaque
+slug: Web/API/HTMLCanvasElement/mozOpaque
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+translation_of: Web/API/HTMLCanvasElement/mozOpaque
+---
+<div>{{APIRef("Canvas API")}}{{non-standard_header}}</div>
+
+<p>非标准的 <strong><code>HTMLCanvasElement.mozOpaque</code></strong> 是一种 {{jsxref("Boolean")}} 的数据反映了{{HTMLElement("canvas")}}元素的{htmlattrxref("moz-opaque"， "canvas")} HTML属性。它能够让画布（canvas）将半透明作为一个参考因素。如果画布知道没有半透明因素，作画的性能可以优化。</p>
+
+<p class="note">当使用{{domxref("HTMLCanvasElement.getContext()")}}创建绘图上下文时，该api将被标准化为将alpha选项设置为false。应该避免使用mozOpaque。Firefox将在未来停止支持它。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox notranslate">var <em>opaque</em> = <em>canvas</em>.mozOpaque;
+<em>canvas</em>.mozOpaque = true;
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>有如下{{HTMLElement("canvas")}} 元素:</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="300" moz-opaque&gt;&lt;/canvas&gt;
+</pre>
+
+<p>你可以获取或设置 <code>mozOpaque</code> 属性. 例如，当mimeType == 'image/jpeg'或类似值时，可以将其属性值设置为true，以在不需要半透明度的情况下提高应用程序的性能。</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+console.log(canvas.mozOpaque); // true
+// 停用该方法
+canvas.mozOpaque = false;
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<p>不属于任何标准。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页面上的兼容性表是由结构化数据生成的。如果您想贡献数据，请查看https://github.com/mdn/browser-compat-data并向我们发送pull请求。</div>
+
+<p>{{Compat("api.HTMLCanvasElement.mozOpaque")}}</p>
+
+<h2 id="See_Also" name="See_Also">参考</h2>
+
+<ul>
+ <li>定义它的接口, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{HTMLElement("canvas")}} 元素的{{htmlattrxref("moz-opaque", "canvas")}}HTML属性</li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">为Firefox OS优化你的JavaScript游戏</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/toblob/index.html b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.html
new file mode 100644
index 0000000000..d9388defd9
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/toblob/index.html
@@ -0,0 +1,204 @@
+---
+title: HTMLCanvasElement.toBlob()
+slug: Web/API/HTMLCanvasElement/toBlob
+translation_of: Web/API/HTMLCanvasElement/toBlob
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p><strong><code>HTMLCanvasElement.toBlob()</code></strong> 方法创造{{domxref("Blob")}}对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。</p>
+
+<p>第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.toBlob(<em>callback</em>, <em>type</em>, <em>encoderOptions</em>);</var>
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>回调函数，可获得一个单独的{{domxref("Blob")}}对象参数。</dd>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>{{domxref("DOMString")}}类型，指定图片格式，默认格式为<code>image/png</code>。</dd>
+ <dt><code>encoderOptions</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Number")}}类型，值在0与1之间，当请求图片格式为<code>image/jpeg</code>或者<code>image/webp</code>时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>无。</p>
+
+<h3 id="异常">异常</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>canvas“<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image">被污染</a>”的情况下不能使用此方法</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="将canvas图像转换为文件">将canvas图像转换为文件</h3>
+
+<p>当一个内容画到canvas上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了id为“canvas”的{{HTMLElement("canvas")}}元素中的图像，复制成一个PNG图，在文档中加入一个新的{{HTMLElement("img")}}元素，这个{{HTMLElement("img")}}元素的源图就是使用canvas创建的那个图像。 </p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement("img"),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // no longer need to read the blob so it's revoked
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+</pre>
+
+<p>注意，我们这里创建的是PNG图片；如果在<code>toBlob()传入第二个参数，就可以指定图片格式。例如，生成JPEG格式的图片：</code></p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality</pre>
+
+<div>
+<h3 id="将canvas转换为ico（仅限Mozilla）">将canvas转换为ico（仅限Mozilla）</h3>
+
+<p>使用<code>-moz-parse来将canvas转换为ico。</code>Windows XP不支持将PNG转为ico，因此转为bmp作为代替。设置下载属性，生成下载链接。下载属性的值将被用来作为文件名。</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement("a");
+    a.textContent = "Download";
+    document.body.appendChild(a);
+    a.style.display = "block";
+    a.download = iconName + ".ico";
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+</div>
+
+<h3 id="Save_toBlob_to_disk_with_OS.File_(chromeadd-on_context_only)">Save toBlob to disk with OS.File (chrome/add-on context only)</h3>
+
+<div class="note">
+<p>This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.</p>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>A low performance polyfill based on toDataURL.</p>
+
+<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i=0; i&lt;len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+</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('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容">浏览器兼容</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.HTMLCanvasElement.toBlob")}}</p>
+
+<h2 id="扩展阅读">扩展阅读</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/todataurl/index.html b/files/zh-cn/web/api/htmlcanvaselement/todataurl/index.html
new file mode 100644
index 0000000000..724c67025f
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/todataurl/index.html
@@ -0,0 +1,155 @@
+---
+title: HTMLCanvasElement.toDataURL()
+slug: Web/API/HTMLCanvasElement/toDataURL
+translation_of: Web/API/HTMLCanvasElement/toDataURL
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p><strong><code>HTMLCanvasElement.toDataURL()</code></strong> 方法返回一个包含图片展示的 <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> 。可以使用 <code>type</code> 参数其类型，默认为 <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> 格式。图片的分辨率为96dpi。</p>
+
+<ul>
+ <li>如果画布的高度或宽度是0，那么会返回字符串“<code>data:,”。</code></li>
+ <li>如果传入的类型非“<code>image/png</code>”，但是返回的值以“<code>data:image/png</code>”开头，那么该传入的类型是不支持的。</li>
+ <li>Chrome支持“<code>image/webp</code>”类型。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox notranslate"><var><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>);</var>
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>图片格式，默认为 <code>image/png</code></dd>
+ <dt><code>encoderOptions</code> {{optional_inline}}</dt>
+ <dd>在指定图片格式为 <code>image/jpeg 或</code> <code>image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量</code>。如果超出取值范围，将会使用默认值 <code>0.92</code>。其他参数会被忽略。</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>包含 <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> 的{{domxref("DOMString")}}。</p>
+
+<h2 id="示例">示例</h2>
+
+<p>有如下{{HTMLElement("canvas")}}元素</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="5" height="5"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>可以用这样的方式获取一个 data-URL</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById("canvas");
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+</pre>
+
+<h3 id="设置jpegs图片的质量">设置jpegs图片的质量</h3>
+
+<pre class="brush: js notranslate">var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
+// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
+var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
+</pre>
+
+<h3 id="Example_Dynamically_change_images" name="Example:_Dynamically_change_images">示例：动态更改图片</h3>
+
+<p>可以使用鼠标事件来动态改变图片（这个例子中改变图片灰度）。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;img class="grayscale" src="myPicture.png" alt="Description of my picture" /&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js;highlight:[33] notranslate">window.addEventListener("load", removeColors);
+
+function showColorImg() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function showGrayImg() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function removeColors() {
+  var aImages = document.getElementsByClassName("grayscale"),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId &lt; nImgsLen; nImgId++) {
+    oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = showColorImg;
+    oColorImg.onmouseout = showGrayImg;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p>
+
+<div id="compat-desktop"></div>
+
+<h2 id="See_Also" name="See_Also">参考</h2>
+
+<ul>
+ <li>定义接口，{{domxref("HTMLCanvasElement")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a>引用中的<a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html b/files/zh-cn/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html
new file mode 100644
index 0000000000..6320ad324e
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html
@@ -0,0 +1,65 @@
+---
+title: HTMLCanvasElement.transferControlToOffscreen()
+slug: Web/API/HTMLCanvasElement/transferControlToOffscreen
+tags:
+  - Canvas
+  - Web图形技术
+  - 离屏Canvas
+translation_of: Web/API/HTMLCanvasElement/transferControlToOffscreen
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p>方法 <code><strong>HTMLCanvasElement</strong></code><strong><code>.transferControlToOffscreen()</code></strong> 将控制转移到一个在主线程或者web worker的 {{domxref("OffscreenCanvas")}} 对象上。</p>
+
+<h2 id="用法">用法</h2>
+
+<pre class="syntaxbox notranslate">OffscreenCanvas HTMLCanvasElement.transferControlToOffscreen()</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个 {{domxref("OffscreenCanvas")}} 对象。</p>
+
+<h2 id="样例">样例</h2>
+
+<pre class="brush: js notranslate">var htmlCanvas = document.createElement('canvas');
+var offscreen = htmlCanvas.transferControlToOffscreen();
+var gl = offscreen.getContext('webgl');
+
+// ... some drawing using the gl context ...
+
+// Push frames back to the original HTMLCanvasElement
+gl.commit();
+</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('HTML WHATWG', "canvas.html#dom-canvas-transfercontroltooffscreen", "HTMLCanvasElement.transferControlToOffscreen()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLCanvasElement.transferControlToOffscreen")}}</p>
+</div>
+
+<h2 id="查阅">查阅</h2>
+
+<ul>
+ <li>The interface defining this method, {{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}</li>
+ <li>{{domxref("WebGLRenderingContext.commit()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/webglcontextlost_event/index.html b/files/zh-cn/web/api/htmlcanvaselement/webglcontextlost_event/index.html
new file mode 100644
index 0000000000..bd8c206ab8
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/webglcontextlost_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'HTMLCanvasElement: webglcontextlost event'
+slug: Web/API/HTMLCanvasElement/webglcontextlost_event
+translation_of: Web/API/HTMLCanvasElement/webglcontextlost_event
+---
+<div>{{APIRef}}</div>
+
+<div></div>
+
+<div>
+<p>如果浏览器检测到与 {{domxref("WebGLRenderingContext")}}对象关联的图形缓冲区已丢失,则会触发<a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> 中的<code><strong>webglcontextlost</strong></code><strong> </strong>事件.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">冒泡</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">可取消</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">继承</th>
+   <td>{{domxref("WebGLContextEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">事件处理程序属性</th>
+   <td>none</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="例子">例子</h2>
+
+<p>在 {{domxref("WEBGL_lose_context")}} 扩展的帮助下,您可以模拟 <code>webglcontextlost</code> 事件:</p>
+
+<pre class="brush: js">const canvas = document.getElementById('canvas');
+const gl = canvas.getContext('webgl');
+
+canvas.addEventListener('webglcontextlost', (event) =&gt; {
+  console.log(event);
+});
+
+//WEBGL_lose_context是webgl是属于 WebGLAPI 的一个扩展API，它提供一组方法用来模拟一个 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext">W</a>ebGLRenderingContext</code> 上下文的丢失和恢复。
+gl.getExtension('WEBGL_lose_context').loseContext();
+
+// "webglcontextlost" event is logged.</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', '#5.15.2', 'webglcontextlost')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLCanvasElement.webglcontextlost_event")}}</p>
+</div>
+
+<h2 id="请参阅">请参阅</h2>
+
+<ul>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isContextLost()")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}, {{domxref("WEBGL_lose_context.loseContext()")}}, {{domxref("WEBGL_lose_context.restoreContext()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/width/index.html b/files/zh-cn/web/api/htmlcanvaselement/width/index.html
new file mode 100644
index 0000000000..2384c0eb2d
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/width/index.html
@@ -0,0 +1,123 @@
+---
+title: HTMLCanvasElement.width
+slug: Web/API/HTMLCanvasElement/width
+translation_of: Web/API/HTMLCanvasElement/width
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p><strong><code><span>HTMLCanvasElement.width </span></code></strong>属性是一个对应 {{HTMLElement("canvas")}} 元素 CSS 像素 {{htmlattrxref("width", "canvas")}} 的正整数. 当这个属性没有指定时, 或者被赋予一个不合法的值, 比如一个负值, 默认使用 300.</p>
+
+<p>这是其中之一，另一个是 {{domxref("HTMLCanvasElement.height")}}, 它们控制了 canvas 的大小尺寸.</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.width;
+<em>canvas</em>.width = <em>pxl</em>;
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>有这样一个 {{HTMLElement("canvas")}} 元素:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>你能够通过下面的代码得到 canvas 的宽度:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+console.log(canvas.width); // 300
+</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('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(4) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatOpera(9) }}</td>
+   <td>{{ CompatSafari(3.1) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">查看更多</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>另一个控制 canvas 大小的属性, {{domxref("HTMLCanvasElement.height")}}.</li>
+</ul>
diff --git a/files/zh-cn/web/api/htmlcanvaselement/捕获流/index.html b/files/zh-cn/web/api/htmlcanvaselement/捕获流/index.html
new file mode 100644
index 0000000000..999485b6f6
--- /dev/null
+++ b/files/zh-cn/web/api/htmlcanvaselement/捕获流/index.html
@@ -0,0 +1,122 @@
+---
+title: HTMLCanvasElement.captureStream()
+slug: Web/API/HTMLCanvasElement/捕获流
+translation_of: Web/API/HTMLCanvasElement/captureStream
+---
+<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div>
+
+<p>该 <code><strong>HTMLCanvasElement</strong></code><strong><code>.captureStream()</code></strong> 方法返回的 {{domxref("CanvasCaptureMediaStream")}} 是一个实时视频捕获的画布。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox"><var>MediaStream</var> = <var>canvas</var>.captureStream(<var>frameRate</var>);
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>frameRate</code> 可选</dt>
+ <dd><font><font>设置双精准度浮点值为每个帧的捕获速率。</font><font>如果未设置，则每次画布更改时都会捕获一个新帧。</font><font>如果设置为</font></font><code>0</code><font><font>，则会捕获单个帧。</font></font></dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>对一个 {{domxref("MediaStream")}} <font>对象</font><font>的引用</font>.</p>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js"><code>//</code>获取所需要截取媒体流的canvas element
+var canvasElt = document.querySelector('canvas');
+
+//<code>截取到媒体流</code>
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+//使用媒体流
+// E.g.使用RTCPeerConnection来传输给其它的电脑
+// 下面的pc是其他地方创建的一个RTCPeerConnection
+pc.addStream(stream);
+</pre>
+
+<h2 id="产品规格">产品规格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatChrome(51.0)}}</td>
+   <td>{{CompatGeckoMobile(43)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <font>在Firefox 41和42中，此功能默认是禁用的; </font><font>将首选项</font> <code>canvas.capturestream.enabled</code> 设置 <code>true</code> 。</p>
+
+<h2 id="看看其他">看看其他</h2>
+
+<ul>
+ <li>{{domxref("CanvasCaptureMediaStream")}},所属接口.</li>
+ <li>{{domxref("HTMLMediaElement.captureStream()")}}, 允许从一个媒体中获取流</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("Media Capture and Streams API")}}</li>
+</ul>