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. Он также наследует свойства и методы интерфейса 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
function
that 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
.
Спецификации
Specification |
---|
HTML # htmlcanvaselement |
Совместимость с браузерами
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | ||||||||||||
height | ||||||||||||
mozOpaque | ||||||||||||
mozPrintCallback | ||||||||||||
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.
Смотрите также
- HTML element implementing this interface:
<canvas>
.