非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
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) | 未实现 | 未实现 | 未实现 |
参见
- 接口定义,
CanvasRenderingContext2D
.