1 files changed, 105 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html
new file mode 100644
index 0000000000..51c79e5106
--- /dev/null
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html
@@ -0,0 +1,105 @@
+---
+title: CanvasRenderingContext2D.drawWindow()
+slug: Web/API/CanvasRenderingContext2D/drawWindow
+translation_of: Web/API/CanvasRenderingContext2D/drawWindow
+---
+<div>{{APIRef}} {{deprecated_header}}</div>
+
+<p><code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawWindow()</code></strong> 是 Canvas 2D API 在 <code>canvas </code>内部画布上渲染一个窗体区域的已弃用的非标准接口。 用来渲染窗口可视区的内容，忽略窗口的剪切和滚动。</p>
+
+<p>这个API 不能在 Web 内容中应用。它是一个同步的 API，并且由于它不能对裂变的跨域 <code>iframe</code> （译者注：我也不知道这裂变是个啥），如果你的浏览器扩展中使用这一 API 的话，建议你改用 {{WebExtAPIRef('tabs.captureTab')}} 。如果你的代码是针对 chrome 的话，用来自父进程的 <a href="https://searchfox.org/mozilla-central/rev/9b282b34b5/dom/chrome-webidl/WindowGlobalActors.webidl#81-98">WindowGlobalParent.drawSnapshot</a>  接口可能会更合适。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate"><span>void </span><var><em>ctx</em>.drawWindow(window, x, y, w, h, bgColor[, flags]);</var></pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>window</code></dt>
+ <dd>需要渲染的{{domxref("Window")}} 。</dd>
+ <dt>x</dt>
+ <dd>窗体的 X 坐标。</dd>
+ <dt>y</dt>
+ <dd>窗体的 Y 坐标。</dd>
+ <dt>w</dt>
+ <dd>窗体的宽度。</dd>
+ <dt>h</dt>
+ <dd>窗体的高度。</dd>
+ <dt><code>bgColor</code></dt>
+ <dd>{{domxref("DOMString")}}，描述当窗体渲染到canvas之前，进行填充的颜色。 颜色可以是透明/半透明。 它被赋值为CSS 颜色字符串（例如： <code>rgb()</code> 或者 <code>rgba()）。</code><br>
+ 注意：
+ <ul>
+  <li>如果"<code>rgba(0,0,0,0)</code>"用来当背景色， 图像透明的地方窗体也是透明的。</li>
+  <li>顶级的预览文档通常不会是透明的，因为用户的背景色偏好设置会被应用。但是{{HTMLElement("iframe", "iframes")}} 是透明的，如果页面没有设置背景。</li>
+  <li>如果不透明的颜色做为背景色， 渲染速度会更快，因为我们不需要计算窗体的透明度。 </li>
+ </ul>
+ </dd>
+ <dt>flags {{optional_inline}}</dt>
+ <dd>用来更好的控制 <code>drawWindow</code> 。 Flags 可以使用或运算符进行连接。
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">常量</td>
+    <td class="header">值</td>
+    <td class="header">描述</td>
+   </tr>
+   <tr>
+    <td><code>DRAWWINDOW_DRAW_CARET</code></td>
+    <td><code>0x01</code></td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">绘制时，如果被占用，显示插入符。</span></td>
+   </tr>
+   <tr>
+    <td><code>DRAWWINDOW_DO_NOT_FLUSH</code></td>
+    <td><code>0x02</code></td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">不要清空待定的布局通知，否则会被批量挂起。</span></td>
+   </tr>
+   <tr>
+    <td><code>DRAWWINDOW_DRAW_VIEW</code></td>
+    <td><code>0x04</code></td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">绘制滚动条，并滚动当前的视口。</span></td>
+   </tr>
+   <tr>
+    <td><code>DRAWWINDOW_USE_WIDGET_LAYERS</code></td>
+    <td><code>0x08</code></td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">使用小部件层进行有效的管理。这意味着可以使用硬件加速， 但是实际上会变慢，并且降低品质。不管怎样，它都会更准确地反映已经渲染到屏幕上的像素。</span></td>
+   </tr>
+   <tr>
+    <td><code>DRAWWINDOW_ASYNC_DECODE_IMAGES</code></td>
+    <td><code>0x10</code></td>
+    <td><span style="background-color: rgba(212, 221, 228, 0.14902);">不需要同步解码图像 - 绘制我们已经有的。</span></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>这个方法在canvas中绘制了一个DOM 窗口的内容快照。例子：</p>
+
+<pre class="brush: js notranslate">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+</pre>
+
+<p>以像素为单位，相对可视区左上角的矩形框内，使用白色作为背景色，在canvas中绘制当前窗口的内容。如果指定"<code style="font-style: normal;">rgba(255,255,255,0)</code>" 作为颜色，则内容的背景色是透明的（造成绘制速度变慢）。</p>
+
+<p>使用纯白色"<code style="font-style: normal;">rgb(255,255,255)</code>"或者透明颜色之外的任何背景，都不是一个好的主意。就像所有浏览器要做的，多数网站期望他们界面透明的部分绘制到白色背景上。</p>
+
+<p>使用这个方法，可以使用任意内容填充隐藏的IFRAME（例如：CSS-styled HTML text 或者 SVG）并绘制到canvas中。为了适应当前的变形，它会缩放、旋转。</p>
+
+<p>Ted Mielczarek 的 <a class="external external-icon" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">标签预览</a> 扩展使用这种技术，在 chrome 中提供网页的缩略图。源代码可以作为参考。</p>
+
+<h2 id="规范描述">规范描述</h2>
+
+<p>目前的规范或者草案不包含此章节。这是一个不标准的、仅供内部使用的API。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.CanvasRenderingContext2D.drawWindow")}}<br>
+ <span>参见</span></p>
+
+<div id="compat-mobile"></div>
+
+<ul>
+ <li>接口定义， {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>