<canvas>

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.

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.

Примеры

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

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

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

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

Specification
HTML Standard
# the-canvas-element

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

BCD tables only load in the browser

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