Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Теги HTML

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> 

Результат данного примера в окне браузера:

Пример использования тега <canvas>
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru