Canvas — технология рисования в браузере¶
Canvas (полное название — HTML5 Canvas) — элемент разметки HTML, предоставляющий программный интерфейс для двумерного рисования средствами скриптового языка JavaScript. Представляет собой прямоугольную область на веб-странице, на которую можно выводить графику: линии, фигуры, изображения, текст, анимацию. Технология является частью стандарта HTML5 и поддерживается всеми современными браузерами.
¶История
Элемент <canvas> был впервые представлен компанией Apple в 2004 году для реализации виджетов в браузере Safari. В 2005 года технология была описана в документации Apple, а затем подхвачена Mozilla и Opera. В 2006 года Mozilla и Apple совместно передали спецификацию в консорциум W3C. Стандарт Canvas 2D стал частью спецификации HTML5, а в 2012 году W3C опубликовал рекомендацию Canvas Level 1. Параллельно разрабатывался API WebGL для трёхмерной графики на основе canvas.
¶Устройство и API
Canvas представляет собой растровую (пиксельную) поверхность. По умолчанию размер области составляет 300×150 пикселей, но может задаваться атрибутами width и height. В отличие от векторного формата SVG, содержимое canvas после отрисовки не является объектной моделью: изменить отдельную нарисованную фигуру задним числом нельзя, только перерисовать всю сцену.
Для работы с canvas используется объект CanvasRenderingContext2D, получаемый методом getContext('2d'). Основные возможности контекста:
- рисование линий, прямоугольников, дуг, кривых Безье;
- заливка и обводка с заданными цветами, градиентами и шаблонами;
- работа с текстом (шрифты, выравнивание, измерение);
- операции с изображениями (масштабирование, поворот, обрезка);
- трансформации (сдвиг, поворот, масштабирование, отражение);
- композитинг и прозрачность;
- управление отдельными пикселями через
ImageData.
Для трёхмерной графики используется контекст webgl, реализующий OpenGL ES 2.0 в браузере.
¶Принцип работы
Canvas рисует пиксели, а не объекты. Каждый вызов метода контекста немедленно (или в ближайший кадр) преобразуется в изменение пикселей на поверхности. Для создания анимации используется метод requestAnimationFrame, который синхронизирует перерисовку с частотой обновления экрана (обычно 60 кадров в секунду). Сцену приходится перерисовывать целиком на каждом кадре.
¶Применение
Технология canvas применяется в самых разных областях веб-разработки:
- Игры и анимации — canvas является основой большинства браузерных игр, включая 2D-игры и игры с простой 3D-графикой на WebGL.
- Визуализация данных — построение диаграмм, графиков, карт (библиотеки D3.js, Chart.js, ECharts).
- Обработка изображений — фильтры, редактирование фотографий, компоновка изображений, создание миниатюр.
- Генерация изображений — создание капчи, QR-кодов, водяных знаков, синтез текстур.
- Рисование и рукописный ввод — приложения для эскизов, интерактивные доски, подпись документов.
- Визуализация звука — осциллограммы, спектрограммы.
- Распознавание и обработка видео — анализ кадров с веб-камеры (связка с API
getUserMedia).
¶Canvas и SVG
| Характеристика | Canvas | SVG |
|---|---|---|
| Тип графики | Растровая | Векторная |
| Объектная модель | Отсутствует | Каждый элемент — объект |
| Изменение отдельного элемента | Невозможно без перерисовки | Возможно |
| Масштабирование | С потерей качества | Без потерь |
| Производительность при большом числе объектов | Высокая | Ниже |
| События на элементах | Нет (нужен ручной hit-test) | Есть |
| Подходит для | Анимации, игр, фильтров | Диаграммы, иконки, интерфейсы |
¶Особенности и ограничения
Canvas является растровым, поэтому при масштабировании изображение может размываться. Содержимое canvas нельзя выделить мышью, скопировать как текст или индексировать поисковыми системами. Доступ к пикселям другого домена ограничен политикой same-origin policy. Размер площади ограничен браузером: в Chrome и Firefox предел составляет около 16 384 пикселей по каждой стороне, суммарная площадь также может быть ограничена (обычно не более 268 миллионов пикселей).
¶Популярные библиотеки
Для работы с canvas создано множество JavaScript-библиотек: Fabric.js (объектная модель поверх canvas), Konva (интерактивные сцены), PixiJS (высокопроизводительная 2D-графика), p5.js (творческое программирование), Paper.js (векторная графика), Three.js (3D-графика на WebGL).
¶Источники
- Спецификация W3C Canvas Level 1
- MDN Web Docs: HTMLCanvasElement
- Документация Apple по элементу canvas (2005)
- HTML Living Standard, WHATWG