CanvasRenderingContext2D.drawWindow()

非标准
该特性是非标准的,请尽量不要在生产环境中使用它!

CanvasRenderingContext2D.drawWindow() 是Canvas 2D API 在 canvas 内部渲染一个窗体区域的非标准的、内部使用的 方法 窗口可视区的内容被渲染,忽略窗口的剪切和滚动。

这个API 不能在网路中应用。它是 chrome 专属的。

语法

void ctx.drawWindow(window, x, y, w, h, bgColor, flags = 0);

参数

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

示例

这个方法在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。

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 未实现 (Yes) 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 (Yes) 未实现 未实现 未实现

参见

文档标签和贡献者

 此页面的贡献者: ice-i-snow
 最后编辑者: ice-i-snow,