HTMLCanvasElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

**HTMLCanvasElement**接口提供用于操纵<canvas>元素的布局和表示的属性和方法。 **HTMLCanvasElement**接口还继承了HTMLElement接口的属性和方法。

must be a string

属性

从其父项HTMLElement继承属性。

HTMLCanvasElement.height

是一个正整数,反映了<canvas> 元素的height HTML 属性,以 CSS 像素表示。如果未指定属性,或者将其设置为无效值(例如负数),则使用默认值 150。

HTMLCanvasElement.width

是一个正整数,反映了<canvas> 元素的width HTML 属性,以 CSS 像素表示。如果未指定属性,或者将其设置为无效值(例如负数),则使用默认值 300。

HTMLCanvasElement.mozOpaque 非标准 已弃用

是反映 <canvas>元素的moz-opaque 属性的Boolean。它让画布知道半透明性是否会成为一个因素。如果画布知道没有透明感,则可以优化绘画性能。仅基于 Mozilla 的浏览器支持此功能,可以使用标准化的canvas.getContext('2d', { alpha: false }) 代替。

HTMLCanvasElement.mozPrintCallback 非标准

是最初为空的函数。Web 内容可以将其设置为 JavaScript 函数,该函数将在打印页面时重新绘制画布时调用。调用时,回调将传递一个实现了MozCanvasPrintState接口的“printState”对象。回调可以从 printState 对象获取要绘制的上下文,然后必须在完成时在其上调用 done() 。 mozPrintCallback 的目的是在所使用打印机的分辨率下获得较高分辨率的画布渲染。 请参阅此博客文章

方法

从其父项HTMLElement继承方法。

HTMLCanvasElement.captureStream() 实验性

返回CanvasCaptureMediaStream ,它是对画布表面的实时视频捕获。

HTMLCanvasElement.getContext()

返回画布上的绘图上下文;如果不支持上下文 ID,则返回 null。绘图上下文可让你在画布上绘图。调用 getContext 传入"2d" 可以返回一个CanvasRenderingContext2D对象,也可以传入"webgl"(或"experimental-webgl")返回一个WebGLRenderingContext 对象。此上下文仅在实现WebGL的浏览器上可用。

HTMLCanvasElement.toDataURL()

返回一个数据 URL,该 URL 包含由类型参数指定的格式的图像(默认为png)。返回的图像分辨率为 96dpi。

HTMLCanvasElement.toBlob()

创建一个Blob 对象,表示 canvas 中包含的图像;该文件可以由用户代理决定是否缓存在磁盘上或存储在内存中。

HTMLCanvasElement.transferControlToOffscreen() 实验性

将控制权转移到主线程或辅助线程上的 OffscreenCanvas对象。

过时的方法

HTMLCanvasElement.mozGetAsFile() 非标准 已弃用

返回代表画布中包含的图像的 File 对象;该文件是基于内存的文件,具有指定的名称。如果未指定类型,则图像类型为 image/png。

事件

使用addEventListener()监听这些事件。

webglcontextcreationerror

如果用户代理无法创建WebGLRenderingContextWebGL2RenderingContext 上下文,则触发该事件。

webglcontextlost

如果用户代理检测到与WebGLRenderingContextWebGL2RenderingContext 对象关联的绘图缓冲区已丢失,则触发此事件。

webglcontextrestored

如果用户代理为WebGLRenderingContextWebGL2RenderingContext 对象恢复绘图缓冲区,则触发该事件。

规范

Specification
HTML
# htmlcanvaselement

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLCanvasElement
captureStream
contextlost event
contextrestored event
getContext
2d context
options.alpha parameter
options.colorSpace parameter
options.desynchronized parameter
options.willReadFrequently parameter
bitmaprenderer context
options.alpha parameter
WebGL2 context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
WebGL context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
webgpu context
Experimental
height
mozOpaque
DeprecatedNon-standard
mozPrintCallback
Non-standard
toBlob
quality parameter
type parameter supports "image/jpeg"
type parameter supports "image/png"
type parameter supports "image/webp"
toDataURL
type parameter supports "image/jpeg"
type parameter supports "image/png"
type parameter supports "image/webp"
transferControlToOffscreen
webglcontextcreationerror event
webglcontextlost event
webglcontextrestored event
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.