<canvas>

HTML <canvas> Элемент может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). Например, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внутри блока <canvas>. Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.

Больше статей о canvas canvas topic page.

Content categories Flow content, phrasing content, embedded content, palpable content.
Permitted content Transparent но без interactive content descendants except(соглашаться?) для <a> элементы, <button> элементы, <input> элементы как type атрибут is checkbox, radio, или button.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Permitted parent elements Any element that accepts phrasing_content.
DOM interface HTMLCanvasElement

Атрибуты

Этот элемент включает global attributes.

height
Высота в координатном пространстве в CSS пикселях. По умолчанию 150.
moz-opaque
Дай холсту знать будет ли фактором или нет полупрозрачность. Если холст знает что нет полупрозрачности, производительность рисования может быть оптимизирована.
width
Ширина в координатном пространстве в CSS пикселях. По умолчанию 300.

Описание

Обязательно </canvas> тег

В отличии от <img> элемента, <canvas> элемент требует закрытия тега (</canvas>).

Определение размеров холста

Отображаемый размер холста может быть изменён используя stylesheet. Изображение масштабируется при рендеринге, чтобы соответствовать стилю размер. Если ваш рендеринг кажется искажённым, попытайтесь указать ваши атрибуты ширины и высоты точно в атрибутах <canvas>, и не используя CSS.

Примеры

<canvas id="canvas" width="300" height="300">
  Извините, ваш браузер нет поддерживает&lt;canvas&gt; элемент.
</canvas>

Если ваш холст не использует transparency, установите moz-opaque атрибут на canvas теге. Это информация может быть использована для оптимизации рендеринга. Однако, этот атрибут не был стандартизирован и работает только в браузерах основанных на движках рендеринга Mozilla .

<canvas id="mycanvas" moz-opaque></canvas>

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение '<canvas>' в этой спецификации.
Живой стандарт
HTML5
Определение '<canvas>' в этой спецификации.
Рекомендация Initial definition

Совместимость браузеров

BCD tables only load in the browser

Смотрите также