HTMLCanvasElement

实例属性

继承自其父级 HTMLElement 的属性。

HTMLCanvasElement.height

<canvas> 元素的 height HTML 属性是一个非负整数，表示画布一行像素（或 RGBA 值）的数量。当该属性未指定，或设置为无效值（例如负数）时，将使用默认值 150。如果未为 <canvas> 分配 [单独的] CSS height，则此值还将用作画布在 CSS 像素长度单位中的高度。

HTMLCanvasElement.width

<canvas> 元素的 width HTML 属性是一个非负整数，表示画布一列像素（或 RGBA 值）的数量。当该属性未指定，或设置为无效值（例如负数）时，将使用默认值 300。如果未为 <canvas> 分配 [单独的] CSS width，则此值还将用作画布在 CSS 像素长度单位中的宽度。

HTMLCanvasElement.mozOpaque 非标准 已弃用

一个布尔值，反映 <canvas> 元素的 moz-opaque HTML 属性。它让画布知道透明度是否是影响因素。如果画布知道没有透明度，则可以优化绘制性能。这仅在基于 Mozilla 的浏览器中受支持；请改用标准化的 canvas.getContext('2d', { alpha: false })。

HTMLCanvasElement.mozPrintCallback 非标准

一个 function，最初为 null。Web 内容可以将其设置为一个 JavaScript 函数，当打印页面时需要重绘画布时，该函数将被调用。调用时，回调函数会收到一个实现 MozCanvasPrintState 接口的“printState”对象。回调函数可以从 printState 对象获取要绘制的上下文，并在完成后必须在其上调用 done()。mozPrintCallback 的目的是以使用中的打印机的分辨率获得更高分辨率的画布渲染。 请参阅此博文。

实例方法

继承自其父级 HTMLElement 的方法。

HTMLCanvasElement.captureStream()

返回一个 CanvasCaptureMediaStreamTrack，它是画布表面的实时视频捕获。

HTMLCanvasElement.getContext()

返回画布上的绘图上下文，如果上下文标识符不受支持，或者画布已被设置为不同的上下文模式，则返回 null。

HTMLCanvasElement.toDataURL()

返回一个 data-URL，其中包含指定格式（默认为 png）的图像表示。返回的图像分辨率为 96dpi。

HTMLCanvasElement.toBlob()

创建一个 Blob 对象，表示画布中的图像；此文件可以由用户代理自行决定缓存在磁盘上或存储在内存中。

HTMLCanvasElement.transferControlToOffscreen()

将控制转移到 OffscreenCanvas 对象，该对象可以在主线程或工作线程上。

事件

继承其父级 HTMLElement 的事件。

使用 addEventListener() 监听这些事件，或通过将事件监听器分配给此接口的 oneventname 属性。

contextlost

如果浏览器检测到 CanvasRenderingContext2D 上下文已丢失，则触发。

contextrestored

如果浏览器成功恢复了 CanvasRenderingContext2D 上下文，则触发。

webglcontextcreationerror

如果用户代理无法创建 WebGLRenderingContext 或 WebGL2RenderingContext 上下文，则触发。

webglcontextlost

如果用户代理检测到与 WebGLRenderingContext 或 WebGL2RenderingContext 对象关联的绘图缓冲区已丢失，则触发。

webglcontextrestored

如果用户代理恢复了 WebGLRenderingContext 或 WebGL2RenderingContext 对象的绘图缓冲区，则触发。

规范

浏览器兼容性

另见

• 实现此接口的 HTML 元素： <canvas>