HTML5. Часть 3

SVG

SVG (scalable vector graphic) — формат векторной графики. В отличии от растровой графики, в которой файлы хранят информацию о каждом пикселе, в векторной графике хранятся уравнения, которые задают то, что должно быть отображено.

Особенности SVG:

• т.к. графика векторная, то изображение легко масштабируется без потери качества
• SVG работает с двумерной графикой
• SVG основан на XML, а потому его легко можно редактировать в любом текстовом редакторе
• в SVG каждый объект описывается отдельно и к любому из них можно получить доступ

Способы добавления SVG на страницу

1. Как src для тега изображения:

2. Как background-image в CSS:

3. Через @import для SVG-шрифтов:

4. С помощью тега object:

Все перечисленные способы работали и раньше. Стандарт HTML5 позволяет вставлять SVG-графику в собственный контейнер - тег svg:

Рисование примитивов SVG

Контейнер SVG

Для вставки SVG-графики на страницу используют тег svg. Конетейнер SVG может иметь следующие параметры:

• version — указывает, какой спецификации принадлежит контейнер SVG. Принимает значения "1.0" или "1.1"
• width,height — размеры контейнера с указанием единиц измерения, по умолчанию - px
• viewBox — определяет зону отрисовки графики, четыре числа через пробел, означающие координаты двух точек

viewBox может использоваться как для обрезки изображения:

так и для масштабирования:

Тег svg не имеет визуального представления, он является лишь контейнером для других элементов.

Элементы внутри контейнера визуально располагаются друг над другом, т.е. самый последний элемент визуально перекрывает остальные (имеет "болший z-index").

Линии

Для рисования линий используют элемент line:

Используемые атрибуты:

• x1,y1 — координаты начала линии
• x2,y2 — координаты конца линии
• stroke — цвет линии (ключевое слово, rgb, #hex)
• stroke-width — толщина линии

Большинство параметров можно задавать не в виде атрибутов, а в виде CSS. Следующая запись для линии будет равносильна предыдущей:

Полилинии

Полилинии — это последовательно нарисованные линии, у которых конец предыдущей линии является началом следующей. Для полилиний используется элемент polyline:

Полилинии, как и большинство фигур векторной графики, имеют обводку и заливку. Заливка в данном случае применяется для области от первой точки полилинии до последней.

Круг

Элемент circle описывает круг, при этом необходимо задать координаты центра круга, его радиус, а так же цвета обводки и заливки:

По умолчанию координаты центра круга - 0,0.

Эллипс

Для рисования эллипса используется элемент ellipse. В отличие от круга эллипс имеет два радиуса, горизонтальный и вертикальный:

Прямоугольник

Элемент rect используется для создания прямоугольников. Точкой отсчета прямоугольника является левый верхний угол, т.к. именно эти координаты нужно указать в атрибутах. Также задают длину и высоту:

Многоугольник

Для построения многоугольников, не являющихся прямоугольниками, в SVG есть элемент polygon ("poly"-много, "gon"-угол). В атрибуте points указываются координаты всех точек многоугольника, при этом контур закрывается автоматически:

Элемент path

Для построения фигур произвольной сложности используется элемент path. Его атрибут d содержит инструкции движения и рисования для виртуального пера в специальном формате. Каждая инструкция закодирована буквой и принимает одну или несколько координат. Список инструкций:

• M — переместить перо
• L — произвольная линия
• H — горизонтальная линия
• V — вертикальная линия
• C — кривая Безье
• S — гладкая кривая Безье
• Q — квадратичная кривая Безье
• T — гладкая квадратичная кривая Безье
• A — элиптическая дуга
• Z — закрыть путь

Например, треугольник можно описать не тремя точками, а четырьмя инструкциями:

Использование букв в нижнем регистре для линий позволяет указать относительные, а не абсолютные координаты:

Более сложные фигуры используют другие элементы path:

Кривая Безье имеет координаты трех точек: двух опорных и точки окончания кривой.

Для скругленных линий можно использовать элиптические дуги. При этом набор координат для этих дуг более сложный - горизонтальный радиус, вертикальный радиус, поворот по оси X, флаг "большой дуги", флаг скрытия,координата X конца дуги, координата Y конца дуги:

Добавление текста

Элемент text может не принимать никаких параметров:

Опорной точкой элемента text является левый нижний угол, потому чтобы что-то увидеть, нужно задать координаты отображения:

Атрибут text-anchor позволяет указать "выравнивание" строки относительно ее горизонтальной координаты:

Атрибут textLength позволяет указать ширину строки и буквы внутри строки будут соответствующим образом выравниваться:

Длинный текст может быть разбит на группы с помощью tspan. Для каждой группы можно задать свое форматирование:

Градиенты

SVG позволяет создавать градиенты, которые могут использоваться в качестве заливки как обычные цвета. Как и в CSS, в SVG есть два типа градиента: линейный и радиальный. Описание градиента создается с помощью linearGradient, объявляемом в специальном блоке defs, а потом может использоваться любым элементом, ссылающимся на id градиента. К определенному таким способом градиенту может получить любой svg-контейнер на странице. Это похоже на определение стилей в CSS.

Направление градиента регулируется координатами, указанными в градиенте, точек фиксации цвета может быть несколько:

Радиальный градиент описывается элементом radialGradient, в атрибутах указывается центр градиента и его радиусы:

Свойства стилей

Стили обводки

Для стилизации обводки можно использовать следующие атрибуты:

• stroke — цвет обводки
• stroke-width — ширина обводки
• stroke-linecap — стиль концов линии обводки
• stroke-linejoin — стиль обводки при пересечении двух линий
• stroke-dasharray — стиль пунктирной линии обводки

Атрибут stroke-linecap принимает одно из трех значений: square (по умолчанию) - квадратный край, включает координаты первой и последней точек, round - скругленный край, включает координаты первой и последней точек, butt - скругленный край, исключает координаты первой и последней точек.

Атрибут stroke-dasharray принимает одно из трех значений: miter (по умолчанию) - пересечение под углом, round - пересечение под скругленным углом, bevel - пересечение по срезанным углом:

Атрибут stroke-dasharray принимает последовательность чередующихся длин штрихов и пропусков:

Другие возможности

Использование ссылок

Любой видимый элемент, обернув его ссылкой, можно сделать кликабельным:

Вставка изображений

Canvas

Canvas определяет холст для скриптовой генерации графики на странице.

Особенности canvas

• canvas работает с растровой графикой
• API canvas описывает работу с двумерной графикой
• canvas нельзя подключить отдельным файлом
• графика в canvas создается с помощью скриптовых языков, в частности - JavaScript
• canvas не разделяет элементы по отдельности
• содержимое canvas можно получить в формате base64 и сохранить как изображение

Начало работы

Перед началом рисования необходимо создать элемент холста и получить контекст. Также при создании холста следует указать его размеры, иначе будут использоваться размеры по умолчанию 300х150px.

Рисование примитивов

Линия

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

Обычная линия является частным случаем полилинии. Т.е. чтобы нарисовать полилинию достаточно вызвать lineTo необходимое число раз:

Перемещая перо с помощью moveTo можно рисовать прерывистую полилинию:

Если необходимо изменить цвет пера или его толщину, то не обходимо указать нужные параметры до рисования линии. Например, для линии нужно указать strokeStyle в любом месте до вызова метода stroke, чтобы поменять ее цвет:

Изменение толщины линии происходит при присвоении свойству lineWidth нового значения в пикселях:

Свойство lineCap аналогично одноименному свойству в SVG и определяет стиль концов линии: butt для концов без скругления исключая конечные точки, round для концов со скруглением включая конечные точки и square для концов без скругления включая конечные точки:

Пунктирная линия создается с помощью метода setLineDash, который в качестве параметра принимает массив чередующихся длин штрихов и пропусков. Свойство lineDashOffset указывает на отступ штриха от стартовой позиции:

Использование метода closePath позволяет замкнуть полилинию, получив из нее полигональную фигуру.

Рисование прямоугольника

Для создания прямоугольника используется метод rect, который принимает координаты начальной и конечной точек (левого верхнего и правого нижнего угла прямоугольника):

С помощью отдельных методов strokeRect и fillRect можно либо обвести, либо залить прямоугольную область:

Цвет заливки можно изменить с помощью свойства fillStyle:

Стиль обводки меняется так же, как и в случае с линиями.

Рисование окружности

Рисование окружности на самом деле является рисованием замкнутой дуги. Для рисования дуги используется метод arc, который принимает параметрами координаты центра дуги, ее радиус, начальный и конечный углы (в радианах). В случае с окружностью для углов обычно задают значения 0 и 2Pi. Т.к. дуга рисуется обводкой, то необходимо явно вызывать методы beginPath и stroke:

Окружность также можно задать с помощью экспериментального метода ellipse с параметрами: координаты центра эллипса, горизонтальный и вертикальный радиусы, угол поворота эллипса (в радианах), начальный и конечный углы (в радианах), флаг отрисовки против часовой стрелки. Таким образом окружность можно получить, указав в качестве обоих радиусов эллипса одинаковые значения:

Для рисования эллипса воспользоваться методом arc не удастся, так что используют ellipse:

Рисование дуг

Дугу можно нарисовать с помощью метода arc, пример использования которого был уже рассмотрен. В случае, когда нужна именно дуга, указывают соответсвующие значения углов:

Добавление текста

Для рисования текста существует два метода: fillText для заливки и strokeText для обводки. Методы в качестве параметров принимают строку для отрисовки, координаты начала отрисовки (нижний левый угол строки) и необязательный параметр ширины текста. В свойстве font можно указать размер и шрифт текста:

Использование градиентов

Градиенты создаются с помощью методов createLinearGradient и createRadialGradient и сохраняются в переменную, чтобы в дальнейшем их можно было использовать в качестве параметра для свойства fillStyle.

Метод createLinearGradient принимает в качестве аргументов координаты точек начала и конца, а с помощью метода addColorStop в объект градиента добавляются стоп-цвета:

Для радиального градиента метод createRadialGradient принимает в качестве параметров координаты и радиус двух окружностей:

Градиенты могут использоваться не только для заливок, но и для обводок.

Вставка изображений

Метод drawImage вставляет изображение в холст, принимая в качестве параметров координаты вставки и путь к изображению. Изображение должно быть предварительно загружено, потому обычно добавление изображения вешают на событие onload изображения:

При указании дополнительной пары параметров можно смасштабировать изображение:

Указав еще четыре параметра - отступ и размеры - можно вырезать часть изображения из исходного. При этом порядок следования аргументов меняется:

Создание тени

Набор свойст shadow описывает стили тени у элементов:

Манипуляции с холстом

Для преобразования холста и манипуляций с ним используются следующие методы:

• translate(x,y) — перемещает холст и начало коорднат на новое место
• rotate(rad) — поворачивает холст вокруг начала координат на указанное число радиан
• scale(x, y) — масштабирует холст по осям
• globalAlpha(num) — задает уровень прозрачности 0-1
• clip — указыает, что все последующие элементы будут обрезаться согласно уже нарисованным
• clearRect(x,y,width,height) — очищает указанную область

Получить изображение из холста можно с помощью метода toDataURL, первым параметром которому передается content-type желаемого изображения (например, image/jpeg, image/webp или image/png), а вторым - степень сжатия от 0 до 1 (только для jpeg и webm). Пример