From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../canvasrenderingcontext2d/drawwindow/index.html | 105 +++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow/index.html (limited to 'files/zh-cn/web/api/canvasrenderingcontext2d/drawwindow') 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 +--- +
{{APIRef}} {{deprecated_header}}
+ +

CanvasRenderingContext2D.drawWindow() 是 Canvas 2D API 在 canvas 内部画布上渲染一个窗体区域的已弃用的非标准接口。 用来渲染窗口可视区的内容，忽略窗口的剪切和滚动。

+ +

这个API 不能在 Web 内容中应用。它是一个同步的 API，并且由于它不能对裂变的跨域 iframe （译者注：我也不知道这裂变是个啥），如果你的浏览器扩展中使用这一 API 的话，建议你改用 {{WebExtAPIRef('tabs.captureTab')}} 。如果你的代码是针对 chrome 的话，用来自父进程的 WindowGlobalParent.drawSnapshot  接口可能会更合适。

+ +

语法

+ +
void ctx.drawWindow(window, x, y, w, h, bgColor[, flags]);
+ +

参数

+ +
+
window
+
需要渲染的{{domxref("Window")}} 。
+
x
+
窗体的 X 坐标。
+
y
+
窗体的 Y 坐标。
+
w
+
窗体的宽度。
+
h
+
窗体的高度。
+
bgColor
+
{{domxref("DOMString")}}，描述当窗体渲染到canvas之前，进行填充的颜色。 颜色可以是透明/半透明。 它被赋值为CSS 颜色字符串（例如： rgb() 或者 rgba()）。
+ 注意： +
    +
  • 如果"rgba(0,0,0,0)"用来当背景色， 图像透明的地方窗体也是透明的。
    • +
  • 顶级的预览文档通常不会是透明的，因为用户的背景色偏好设置会被应用。但是{{HTMLElement("iframe", "iframes")}} 是透明的，如果页面没有设置背景。
    • +
  • 如果不透明的颜色做为背景色， 渲染速度会更快，因为我们不需要计算窗体的透明度。 
    • +
+
+
flags {{optional_inline}}
+
用来更好的控制 drawWindow 。 Flags 可以使用或运算符进行连接。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
常量值描述
DRAWWINDOW_DRAW_CARET0x01绘制时，如果被占用，显示插入符。
DRAWWINDOW_DO_NOT_FLUSH0x02不要清空待定的布局通知，否则会被批量挂起。
DRAWWINDOW_DRAW_VIEW0x04绘制滚动条，并滚动当前的视口。
DRAWWINDOW_USE_WIDGET_LAYERS0x08使用小部件层进行有效的管理。这意味着可以使用硬件加速， 但是实际上会变慢，并且降低品质。不管怎样，它都会更准确地反映已经渲染到屏幕上的像素。
DRAWWINDOW_ASYNC_DECODE_IMAGES0x10不需要同步解码图像 - 绘制我们已经有的。
+
+
+ +

示例

+ +

这个方法在canvas中绘制了一个DOM 窗口的内容快照。例子：

+ +
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+ +

以像素为单位，相对可视区左上角的矩形框内，使用白色作为背景色，在canvas中绘制当前窗口的内容。如果指定"rgba(255,255,255,0)" 作为颜色，则内容的背景色是透明的（造成绘制速度变慢）。

+ +

使用纯白色"rgb(255,255,255)"或者透明颜色之外的任何背景，都不是一个好的主意。就像所有浏览器要做的，多数网站期望他们界面透明的部分绘制到白色背景上。

+ +

使用这个方法，可以使用任意内容填充隐藏的IFRAME（例如：CSS-styled HTML text 或者 SVG）并绘制到canvas中。为了适应当前的变形，它会缩放、旋转。

+ +

Ted Mielczarek 的 标签预览 扩展使用这种技术，在 chrome 中提供网页的缩略图。源代码可以作为参考。

+ +

规范描述

+ +

目前的规范或者草案不包含此章节。这是一个不标准的、仅供内部使用的API。

+ +

浏览器兼容性

+ +

{{Compat("api.CanvasRenderingContext2D.drawWindow")}}
+ 参见

+ +
+ + -- cgit v1.2.3-54-g00ecf