Примечание: не поддерживается в 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