Интерфейс HTMLCanvasElement предоставляет свойства и методы для управления расположением и представлением элеметов canvas. Он также наследует свойства и методы интерфейса HTMLElement.
Свойства
Наследуются от родителя, HTMLElement.
HTMLCanvasElement.height- Положительное целое число, отражающее HTML-атрибут
heightэлемента<canvas>(воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию— 150. HTMLCanvasElement.mozOpaque- Объект
Boolean, отражающий HTML-атрибутmoz-opaqueэлемента<canvas>. Сообщает холсту, будет ли присутствовать прозрачность. Если холсту известно, что прозрачность не используется, отрисовка может быть оптимизирована. HTMLCanvasElement.width- Положительное целое число, отражающее HTML-атрибут
widthэлемента<canvas>(воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется зачение по умолчанию— 300. HTMLCanvasElement.mozPrintCallback- Is a
functionthat is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. See this blog post.
Методы
Наследуются от родителя, HTMLElement.
HTMLCanvasElement.captureStream()- Возвращает
CanvasCaptureMediaStream— поток видео, которое захватывается в реальном времени с поверхности холста. HTMLCanvasElement.getContext()- Возвращает связный с холстом контекст, который позволяет рисовать на холсте. Если context ID не поддерживается, возвращает null. Вызов getContext с параметром
"2d"возвращает объектCanvasRenderingContext2D, тогда так вызов с параметром"experimental-webgl"(или"webgl") возвращает объектWebGLRenderingContext. Этот контекст поддерживается толко в браузерах, в которых реализован WebGL. HTMLCanvasElement.toDataURL()- Возвращает data-URL, который содержит представление картинки в формате. указанном в параметре
type(по умолчаниюpng). Возвращаемая картинка имеет разрешение 96dpi. HTMLCanvasElement.toBlob()- Создаёт объект
Blob, представляющий картинку, которая содержится в холсте. Этот файл может быть кэширован на диске или сохранён в памяти наусмотрение user agent. HTMLCanvasElement.transferControlToOffscreen()- Передаёт управление объекту
OffscreenCanvas, либо в main thread либо в worker. HTMLCanvasElement.mozGetAsFile()- Возвращает объект
Fileпредставляющий картинку, которая содержится в холсте. This file is a memory-based file, with the specifiedname. Если тип не указан, используетсяimage/png.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Media Capture from DOM Elements Определение 'HTMLCanvasElement' в этой спецификации. |
Рабочий черновик | Adds the method captureStream(). |
| HTML Living Standard Определение 'HTMLCanvasElement' в этой спецификации. |
Живой стандарт | The method getContext() now returns a RenderingContext rather than an opaque object.The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added. |
| HTML 5.1 Определение 'HTMLCanvasElement' в этой спецификации. |
Рекомендация | |
| HTML5 Определение 'HTMLCanvasElement' в этой спецификации. |
Рекомендация | Initial definition. |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support (2D context) |
4.0 | 3.6 (1.9.2) | 9.0 | 9.0 [1] | 3.1 |
toBlob() |
50 | 19 (19) [2] | ? | ? | Нет (bug 71270) |
probablySupportsContext(),setContext(),transferControlToProxy() |
Нет | Нет | Нет | Нет | Нет |
mozGetAsFile() |
Нет | 4.0 (2) | Нет | Нет | Нет |
captureStream() |
Нет | 41 (41) | Нет | Нет | Нет |
transferControlToOffscreen() |
Нет | 44 (44) [3] | Нет | Нет | Нет |
| Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support (2D context) |
2.1 | (Да) | (Да) | ? | 10.0 [1] | 3.2 |
webgl context |
? | ? | (Да) as experimental-webgl |
? | ? | ? |
toBlob() |
Нет (bug 67587) | 50 | 18.0 (18) [2] | ? | ? | Нет (bug 71270) |
probablySupportsContext(),setContext(),transferControlToProxy() |
Нет | Нет | Нет | Нет | Нет | Нет |
mozGetAsFile() |
Нет | Нет | 4.0 (2) | Нет | Нет | Нет |
captureStream() |
Нет | Нет | 41.0 (41) | Нет | Нет | Нет |
transferControlToOffscreen() |
Нет | Нет | 44.0 (44) [3] | Нет | Нет | Нет |
[1] Opera Mini 5.0 and later has partial support.
[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.
[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.
See also
- HTML element implementing this interface:
<canvas>.