在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

弃用
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the 兼容性表格 at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The deprecated, non-standard and internal only CanvasRenderingContext2D .drawWindow() method of the Canvas 2D API renders a region of a window into the canvas . The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.

This API cannot be used by Web content. It is synchronous, and as such can't be compatible with Fission.  If you're using it from an extension, you should switch to tabs.captureTab .  If you're writing chrome code, you probably want WindowGlobalParent.drawSnapshot from the parent process.

句法

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

参数

window

Window to render.

x

The x-axis coordinate of the window.

y

The y-axis coordinate of the window.

w

The width of the window.

h

The height of the window.

bgColor

DOMString that specifies the color the canvas is filled with before the window is rendered into it. This color may be transparent/translucent. It is given as a CSS color string (for example, rgb() or rgba() ).
注意事项：

• If " rgba(0,0,0,0) " is used for the background color, the drawing will be transparent wherever the window is transparent.
• Top-level browsed documents are usually not transparent because the user's background-color preference is applied, but iframes are transparent if the page doesn't set a background.
• If an opaque color is used for the background color, rendering will be faster because we won't have to compute the window's transparency.

flags 可选

Used to better control the drawWindow call. Flags can be ORed together.

常量	值	描述
DRAWWINDOW_DRAW_CARET	0x01	Show the caret if appropriate when drawing.
DRAWWINDOW_DO_NOT_FLUSH	0x02	Do not flush pending layout notifications that could otherwise be batched up.
DRAWWINDOW_DRAW_VIEW	0x04	Draw scrollbars and scroll the viewport if they are present.
DRAWWINDOW_USE_WIDGET_LAYERS	0x08	Use the widget layer manager if available. This means hardware acceleration may be used, but it might actually be slower or lower quality than normal. It will, however, more accurately reflect the pixels rendered to the screen.
DRAWWINDOW_ASYNC_DECODE_IMAGES	0x10	Do not synchronously decode images - draw what we have.

范例

This method draws a snapshot of the contents of a DOM window into the canvas. For example,

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

... would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying " rgba(255,255,255,0) " as the color, the contents would be drawn with a transparent background (which would be slower).

It is usually a bad idea to use any background other than pure white " rgb(255,255,255) " or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.

With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.

Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

规范

Not part of any current specification or draft. This is a non-standard and internal only API.

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
drawWindow 非标	Chrome No	Edge No	Firefox 1.5	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android 4	Opera Android No	Safari iOS No	Samsung Internet Android No

图例

完整支持

完整支持

不支持

不支持

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

另请参阅

• The interface defining this method: CanvasRenderingContext2D
• CanvasRenderingContext2D.drawWidgetAsOnScreen()

元数据

• 最后修改： Jul 20, 2020

相关话题

1. CanvasRenderingContext2D
2. 特性

   1. canvas
   2. currentTransform
   3. direction
   4. fillStyle
   5. filter
   6. font
   7. globalAlpha
   8. globalCompositeOperation
   9. imageSmoothingEnabled
   10. imageSmoothingQuality
   11. lineCap
   12. lineDashOffset
   13. lineJoin
   14. lineWidth
   15. miterLimit
   16. shadowBlur
   17. shadowColor
   18. shadowOffsetX
   19. shadowOffsetY
   20. strokeStyle
   21. textAlign
   22. textBaseline
3. 方法

   1. addHitRegion()
   2. arc()
   3. arcTo()
   4. beginPath()
   5. bezierCurveTo()
   6. clearHitRegions()
   7. clearRect()
   8. clip()
   9. closePath()
   10. createImageData()
   11. createLinearGradient()
   12. createPattern()
   13. createRadialGradient()
   14. drawFocusIfNeeded()
   15. drawImage()
   16. drawWidgetAsOnScreen()
   17. drawWindow()
   18. ellipse()
   19. fill()
   20. fillRect()
   21. fillText()
   22. getImageData()
   23. getLineDash()
   24. getTransform()
   25. isPointInPath()
   26. isPointInStroke()
   27. lineTo()
   28. measureText()
   29. moveTo()
   30. putImageData()
   31. quadraticCurveTo()
   32. rect()
   33. removeHitRegion()
   34. resetTransform()
   35. restore()
   36. rotate()
   37. save()
   38. scale()
   39. scrollPathIntoView()
   40. setLineDash()
   41. setTransform()
   42. stroke()
   43. strokeRect()
   44. strokeText()
   45. transform()
   46. translate()