Примечание: не поддерживается в IE8 и более ранних версиях.
Тег 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