1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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>
|
