This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<canvas>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTML<canvas> Элемент может быть использован для отрисовки графики через скрипты (обычно используетсяJavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока<canvas>. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.
Больше статей о canvascanvas topic page.
| Content categories | Flow content,phrasing content,embedded content, palpable content. |
|---|---|
| Permitted content | Transparent но безinteractive content descendants except(соглашаться?) для<a> элементы,<button> элементы,<input> элементы какtype атрибут ischeckbox,radio, илиbutton. |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parent elements | Any element that acceptsphrasing_content. |
| DOM interface | HTMLCanvasElement |
Атрибуты
Этот элемент включаетglobal attributes.
heightВысота в координатном пространстве в CSS пикселях. По умолчанию 150.
moz-opaqueНе стандартноДай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.
widthШирина в координатном пространстве в CSS пикселях. По умолчанию 300.
Описание
Обязательно</canvas> тег
В отличии от<img> элемента,<canvas> элементтребует закрытия тега (</canvas>).
Определение размеров холста
Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах<canvas>, и не используя CSS.
Примеры
<canvas width="300" height="300"> Извините, ваш браузер нет поддерживает<canvas> элемент.</canvas>Если ваш холст не использует transparency, установитеmoz-opaque атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .
<canvas moz-opaque></canvas>Спецификации
| Specification |
|---|
| HTML # the-canvas-element |