HTML тег <canvas>
Поддержка браузерами
12.0+ | 9.0+ | 2.0+ | 4.0+ | 9.0+ | 3.1+ |
Описание
HTML тег <canvas> (в переводе с англ. означает холст) создает область на веб-станице, которая может быть использована для отрисовки графики в режиме реального времени с помощью сценариев (например, с помощью языка JavaScript). Он может быть использован для создания аркадных или онлайн игр, часов, анимации и т.д.
Добавление на страницу
Элемент <canvas> является обычным HTML-элементом:
<canvas id="test" width="600" height="200"></canvas>
Наш пример имеет три атрибута: id, width и height. Атрибут id (идентификатор) дает нашему элементу уникальное имя - test, это нужно для того, чтобы язык сценариев мог получить к нему доступ. Атрибут width определяет количество пикселей по горизонтали, которое <canvas> будет занимать на веб-странице. Аналогичным образом height определяет вертикальную занимаемую область. Таким образом, браузер сможет выделить пространство нужного размера на веб-странице, согласно указанным значениям.
По умолчанию он является прозрачным и не имеет рамки, то есть он просто является пустым пространством в окне браузера, в котором можно рисовать.
Использование CSS для указания размера
Возможно у вас возник вопрос: можно ли использовать CSS для указания размера элемента <canvas> вместо использования атрибутов width и height?
Можно, однако указание ширины и высоты с помощью CSS будет иметь не тот эффект, который вы ожидаете. По умолчанию элемент имеет ширину 300 пикселей и высоту 150 пикселей. Если не задать атрибуты width и height, то элемент получит размеры по умолчанию. Если затем задать размеры, используя CSS, допустим, 600х200 пикселей, то <canvas> размером 300х150 пикселей подвергнется масштабированию в соответствии с заданными параметрами, равно как и все, что будет в нем нарисовано. Это сродни масштабированию изображения путем задания для него новых ширины и высоты, которые больше или меньше, чем реальные ширина и высота. А при увеличении изображения будет наблюдаться пикселизация, не так ли?
То же самое произойдет и в случае с <canvas>. Элемент шириной 300 пикселей, масштабируемый до 600 пикселей, будет иметь прежнее количество пикселей, но растянутых вдвое. При использовании атрибутов width и height можно задавать размеры для элемента, которые будут больше (или меньше), чем 300х150 пикселей, и все создаваемое в нем будет отображаться нормально. Таким образом, использовать CSS для настройки размера будет целесообразно, если нужно действительно масштабировать элемент.
Работа со старыми версиями браузеров
Не все браузеры поддерживают тег <canvas>, поэтому для информирования пользователей, чьи браузеры не поддерживают его, можно поместить между открывающим и закрывающим тегом специальное сообщение или альтернативное содержимое, которое будет отображаться только в том случае, если тег не поддерживается, в ином случае содержимое элемента будет игнорироваться:
<!-- Размещаем информацию для пользователей --> <canvas> Ваш браузер не поддерживает элемент <canvas> </canvas> <!-- или можно поместить картинку равную размеру элемента --> <canvas> <img src="image1.png"> </canvas>
Атрибуты
- height:
- Определяет высоту элемента в пикселях (например: "400"). Значение по умолчанию - "150".
Примечание: каждый раз при смене высоты или ширины элемента <canvas>, его содержимое будет полностью стерто (смотрите пример в атрибуте width).
- 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>
Результат данного примера в окне браузера:
