Элемент <canvas>
Он выглядит как элемент <img>
, но его отличие в том, что он не имеет атрибутов src и alt. Элемент <canvas>
имеет только два атрибута - ширину и высоту. Оба они не обязательны и могут быть выставлены с использованием свойств DOM. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 пикселей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.
Примечание:
Если вид вашего изображения кажется вам искаженным, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах <canvas>
, а не с помощью CSS.
Атрибут id не специфичен для элемента <canvas>
, но он может быть применен по умолчанию в атрибутах HTML, так как он может быть использован (почти) для любого элемента HTML (так же как класс). Это всегда отличная идея использовать id, так как это позволяет намного проще идентифицировать наш элемент в сценарии.
Элемент <canvas>
может быть стилизован также, как любое изображение (margin, border, background, и т. д.). Эти правила, как бы то ни было, фактически не влияют на отрисовку в canvas. Мы увидим как это сделано позже в этом руководстве. Когда стили не указаны, canvas будет по умолчанию абсолютно прозрачным.
Запасное содержимое
Из-за того, что старые браузеры (в особенности, версии Internet Explorer раннее чем 9) не поддерживают элемент <canvas>
, Вам следует предоставить запасное содержимое для отображения этими браузерами.
Это очень просто: мы всего лишь предоставляем альтернативное содержимое внутри элемента <canvas>
. Браузеры, которые не поддерживают <canvas>
проигнорируют container и отобразят запасное содержимое этого тега. Браузеры, которые поддерживают <canvas>
проигнорируют запасное содержимое, и просто нормально отобразят canvas.
Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:
Сообщать пользователю о том, что его браузер не поддерживает canvas не поможет тем, кто не может прочесть содержимое тега canvas, к примеру. Предоставление полезной информации в дополнительном canvas делает этот тег более доступным для широкого использования.
Требуется тег </canvas>
В отличии от элемента <img>
, элемент <canvas>
требует закрывающийся тег (</canvas>
). Если этот тег не предоставлен, остаток документа будет считаться запасным контентом и не будет отображен.
Если запасной контент не нужен, простой <canvas id="foo" ...></canvas> полностью совместим со всеми браузерами, что поддерживают canvas.