HTMLCanvasElement - 提供了操作 <canvas> 元素的布局和表示的属性和方法

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

属性

从其父类 HTMLElement 继承了属性。

HTMLCanvasElement.height

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

HTMLCanvasElement.width

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

HTMLCanvasElement.mozOpaque

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

HTMLCanvasElement.mozPrintCallback

一个初始值为 null 的 function。Web 内容可以将其设置为 JavaScript 函数，如果打印页面将调用该函数。然后，该功能可以以适合所用打印机的更高分辨率重绘画布。 请参阅该博文。

方法

从其父类 HTMLElement 继承了方法。

HTMLCanvasElement.captureStream()

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

HTMLCanvasElement.getContext()

返回画布上的绘图上下文，如果不支持上下文 ID，则返回 null。绘图上下文允许您在画布上绘图。调用它时传入 "2d" 会返回 CanvasRenderingContext2D，传入 "webgl"（或 "experimental-webgl"）则返回 WebGLRenderingContext 对象。该上下文仅适用于实现 WebGL 的浏览器。

HTMLCanvasElement.toDataURL()

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

HTMLCanvasElement.toBlob()

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

HTMLCanvasElement.transferControlToOffscreen()

将控制转移到主线程或工作线程上的 OffscreenCanvas 对象。

HTMLCanvasElement.mozGetAsFile()

返回表示画布中包含的图像的 File 对象; 这个文件是一个基于内存的文件，带有指定的 name。如果未指定 type，则图像类型为 image/png。

事件

使用 addEventListener() 监听这些事件

webglcontextcreationerror

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

webglcontextlost

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

webglcontextrestored

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

规范

规范	状态	备注
Media Capture from DOM Elements HTMLCanvasElement 的定义	编者的草案	增加了 captureStream() 方法。
HTML Living Standard HTMLCanvasElement 的定义	现行的标准	方法 getContext() 现在返回 RenderingContext 而不是不透明的 object。 添加了 transferControlToOffscreen() 方法。
HTML 5.1 HTMLCanvasElement 的定义	推荐	-
HTML5 HTMLCanvasElement 的定义	推荐	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. Opera Mini 5.0 及更高版本具有部分支持。

2. 参阅 WebKit bug 71270.

相关链接

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