Примечание: Тег не поддерживается в IE8 и более ранних версиях.
Тег <canvas> (с англ. «холст») создаёт область на веб-странице, где можно рисовать графику в реальном времени с помощью сценариев – например, JavaScript. Он идеально подходит для аркадных игр, часов, анимаций и многого другого.
Добавление элемента на страницу
Элемент <canvas> – обычный HTML-элемент:
<canvas id="test" width="600" height="200"></canvas>
В нашем примере заданы три атрибута: id, width и height. Атрибут id даёт элементу уникальное имя – test, чтобы скрипты могли обращаться к нему. Значения width="600" и height="200" определяют горизонтальный и вертикальный размер холста в пикселях, позволяя браузеру выделить нужное пространство на странице.
По умолчанию холст прозрачный и без рамки – это просто пустое место, готовое к рисованию.
Использование CSS для задания размера
Вопрос, который может возникнуть у вас: можно ли управлять размером <canvas> через CSS вместо атрибутов? Конечно, можно. Но эффект будет иной, чем ожидается.
Без указанных атрибутов элемент имеет размеры 300 ? 150 пикселей по умолчанию. Если после этого задать размеры в CSS, например 600 ? 200, то холст размером 300 ? 150 будет масштабирован до новых размеров – всё содержимое растянется пропорционально. Это как растягивание изображения: при увеличении появляется пикселизация.
Атрибуты width и height позволяют задать реальный размер холста, а не просто масштабировать его, поэтому их использование предпочтительнее, если нужно изменить размеры без потери качества. CSS подходит лишь тогда, когда действительно требуется масштабирование.
Поддержка старых браузеров
Не все браузеры понимают <canvas>. Чтобы информировать пользователей с неподдерживаемыми версиями, можно разместить внутри элемента альтернативный контент – он будет отображён только в случае отсутствия поддержки.
<!-- Информация для пользователей --><canvas> Ваш браузер не поддерживает элемент canvas</canvas><!-- Или можно вставить картинку той же ширины и высоты --><canvas> <img src="image1.png" alt="Fallback"></canvas>
Атрибуты - height:
- Определяет высоту в пикселях (например: "400"). По умолчанию 150.
Примечание: при каждом изменении ширины или высоты содержимое стирается.
- width:
- Определяет ширину в пикселях (например: "150"). По умолчанию 300.
Тег <canvas> также поддерживает…
Пример <canvas id="myCanvas" width="100" height="100"></canvas><script type="text/javascript">var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');ctx.fillStyle='#CC5200';ctx.fillRect(0, 0, 100, 100);</script>