Характеристики тега
В каких браузерах работает?
| 9.0+ | 6.0+ | 9.6+ | 3.1+ | 4.0+ | 2.1+ | 3.0+ |
В каких спецификациях используется?
| HTML | - | - | 5.0 |
| XHTML | - | - |
Для чего используется?
Тег позволяет выбрать область, в пределах которой можно будет рисовать, корректировать рисунки и менять их исходные параметры. Процесс рисования выполняется через особые скрипты. Общепринято использовать в качестве языка программирования для подобных случаев - JavaScript. Цвета линий и расскрас рисунка контролируется тоже через скрипты.
Тег <canvas> позволяет создавать не только рисунки, но и анимации, игры и прочее. Довольно часто <canvas> используют для отрисовки графиков зависимостей функций. Это позволяет не прибегать к документу XHTML и его графическим дополнениям, а использовать формат HTML. Возможности данного тега не ограничиваются анимациями, графиками и играми. Умелый веб-разработчики через этот тег создают целые проигрыватели медиа файлов и плееры для воспроизведения музыки и видео.
Сanvas имеет потенциальную возможность обезопасить веб-ресурс от хакерских атак, усложнив каптчу. Суть процесса заключается в том, что в качестве каптчи выступает не картинка, а набор точек, через которые скрипт пишет нужное содержимое для проверки.
Стоит также отметить, что в старых спецификациях HTML этот тег не упоминается. Сведения о нем можно найти только в последней версии HTML 5.
Известно, что <canvas> предназначен для отрисовки только двухмерных рисунков, однако сегодня компания Mozilla Foundation развивает проект, который позволит в canvas рисовать трехмерные объекты. Это будет реализовано благодаря добавки к функционалу ускорители графики нижних уровней.
Как правильно задавать?
<canvas id="значение идентификатора"></canvas>
Какие атрибуты поддерживаются?
- height - определяет высоту области, на которой выполняется рисунок. Изначально тег задает высоту в 300 пикселей.
- width - определяет ширину области, на которой выполняется рисунок. Изначально тег задает ширину в 150 пикселей.
В дополнение этого, тег поддерживает универсальные атрибуты и события.
Закрытый тег
Да.
Пример использования
<!DOCTYPE html> <html> <head> <title>Тег canvas</title> <meta charset="utf-8"> <script> window.onload = function() { var drawingCanvas = document.getElementById('smile'); if(drawingCanvas && drawingCanvas.getContext) { var context = drawingCanvas.getContext('2d'); // скрипт для вывода окружности context.strokeStyle = "#000"; context.fillStyle = "#00ccff"; context.beginPath(); context.arc(150,150,75,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); // скрипт для глаз context.fillStyle = "#b8f4ff"; context.beginPath(); context.arc(126,135,12,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); // скрипт для улыбки context.beginPath(); context.moveTo(105,173); context.quadraticCurveTo(150,195,195,173); context.quadraticCurveTo(150,225,105,173); context.closePath(); context.stroke(); context.fill(); } } </script> </head> <body> <canvas id="smile" width="700" height="250"> <p>Рисунок не удался</p> </canvas> </body> </html>
По итогу получаем
Пример показывает, посредством которых простейших функций JavaScript получают картинки. Также пример показывает, как ориентироваться в активном поле Сanvas при указании координат расположения ключевых составляющих изображения. Также для рисунка закодированы команды изменения цвета рисунка. Кодировка цвета в скриптовом коде ничем не отличается от стандартных веб-цветов и шестнадцатеричной системы.