1.3 Работа с графическими элементами
Рассмотрим отображение 2д элементов на странице. Для работы с графикой используется элемент canvas. Элемент canvas впервые предложен корпорацией Apple в 2004 году, и использовался для создания дополнений к браузеру. На сегодняшний день canvas поддерживается во всех основных браузерах (Рисунок 3.1)
Рисунок 3.1 – Поддержка элемента canvas браузерами
Для встраивания элемента используется тег <canvas>…</canvas>, он рассматривается браузером, и имеет такие же параметры, что и любой другой блочный элемент.
Для работы с данным элементом используется язык JavaScript. Для проверки поддержки используется следующий код:
canvas = document.getElementById('canvas');
if (canvas.getContext)
{
//Canvas поддерживается
}
else
{
//Canvas не поддерживается
}
Все объекты, рисуемые на canvas, отрисовываются на объекте RenderingContext. Для получения доступа к нему вызывается функция getContext('2d'), у элемента. Никакие другие параметры, кроме 2d пока не предусмотрены, однако в будущем это может измениться. Далее все рассматриваемые методы и параметры вызываются у объекта context, если не указано другое.
Создание примитивов на элементе требует выполнения ряда операций:
сообщить, что начинается отрисовка;
нарисовать фигуры;
сообщить, что отрисовка завершена и нужно отобразить нарисованные элементы.
Для этого используются функции:
beginPath() – сообщает о начале отрисовки;
moveTo(x, y) – перемещает перо в указанную точку холста;
lineTo(x, y) – перемещает перо в указанную точку холста, и рисует прямую линию;
strokeRect(x, y, width, height) – отображает прямоугольник с заданной шириной, высотой в заданной точке;
stroke() – отображает нарисованные элементы.
Таким образом, для отображения линии, необходимо указать следующй код:
canvas = document.getElementById('canvas');
if (canvas.getContext)
{
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(10, 20);
context.lineTo(150, 100);
context.stroke();
}
else
{
alert('Canvas is not supported');
}
Результат работы данного кода изображён на рисунке 3.2
Рисунок 3.2 – Результат отображения кода
Также, canvas поддерживает работу с кривыми линиями. Поддерживаются следующие кривые:
кривая Безье. Строится с помощью функции bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y). cpx1, cpy1 – координаты первой контрольной точки; cpx2, cpy2 – координаты второй контрольной точки; x, y – координаты конца прямой. В качестве координат начала берётся текущая позиция пера. Принцип построения кривой отображён на рисунке 3.3.
Рисунок 3.3 – Построение кривой Безье
квадратическая кривая. Строится с помощью функции quadricCurveTo(cpx, cpy, x, y) cpx, cpy – координаты контрольной точки; x, y – координаты конца прямой. В качестве координат начала берётся текущая позиция пера. Принцип построения кривой отображён на рисунке 3.4.
Рисунок 3.4 – Построение квадратической кривой
дуга. Строится с помощью функции arcTo(x1, y1, x2, y2, radius), где x1, y1 – координаты первой контрольной точки; x2, y2 – координаты второй контрольной точки; radius – радиус дуги. Принцип построения кривой отображён на рисунке 3.5.
Рисунок 3.5 – Построение дуги
Все фигуры, которые строили до текущего момента, имели один стиль отображения, для изменения стиля нарисованных элементов объект context элемента canvas имеет следующие параметры:
lineWidth – ширина отображаемой линии в пикселях (по умолчанию 1 пиксель);
lineJoin – типсоединениялинийround –скруглённоесоединение, bevel –срезанное, mittel –прямое(поумолчаниюmittel). Примеры отображаемых линий можно увидеть на рисунке 3.6;
Рисунок 3.6 – Типы соединения линий
strokeStyle – цвет отображаемой прямой (по умолчанию чёрный).
Помимо работы с каркасными фигурами, можно заливать необходимые области экрана заданным цветом. Для этого используются функции:
fillRect(x, y, width, height) – заливает область шириной width и высотой height в точке x, y;
clearRect(x, y, width, height) – восстанавливает фоновый цвет области шириной width и высотой height в точке x, y;
Для определения цвета заливки используется параметр fillStyle.
Помимо работы с фигурами заданного цвета, элемент canvas позволяет работать с уже готовыми изображениями. Для отображения изображения используется функция drawImage(image, x, y, width, height), которая отображает изображение image, в прямоугольнике с шириной width и высотой height, в точке (x, y). До вызова этой функции изображение уже должно быть полностью загружено. Однако загрузка изображения выполняется асинхронно, поэтому перед вызовом данной функции делают следующую проверку:
var image = new Image();
image.src = 'image.jpg';
image.onload = function()
{
drawImage(image, 5, 10, 100, 100);
}
Изображения могут быть использованы в качестве шаблонов, для отрисовки фигур. Для этого загруженное изображение надо преобразовать с помощью функции createPattern(image, repeat), где image –рисунок, repeat – тип повторения. Доступны следующие типы повторения изображения
repeat – повторение, как по оси x, так и по оси y (по умолчанию);
repeat-x – повторение только по оси x;
repeat-y – повторение только по оси y;
norepeat – без повторений.
Далее полученный шаблон необходимо передать в параметр strokeStyle или fillStyle, в зависимости от целей применения.
Также canvas предоставляет методы, для работы с градиентом. Поддерживаются 2 типа градиентов:
линейный. Создаётся функцией createLinearGradient(x0, y0, x1, y1), в прямоуголнике, заданным точками (x0,y0); (x1,y1). Пример градиента отображён на рисунке 3.7.
Рисунок 3.7 – Линейный градиент
радиальный. Создаётся функцией createRadialGradient(x0, y0, r0, x1, y1, r1), и представляет собой две окружности, заданные своими координатами и радиусами. Пример градиента отображён на рисунке 3.8.
Рисунок 3.8 – Радиальный градиент
Для указания цветов градиента, у этого объекта существует метод addColorStop(gradientPart, color), где gradientPart – часть градиента, которая представляется, как число с плавающей точкой от 0 (начало градиента), до 1 (конец градиента), color – цвет в указанной точке.
Далее объект градиент передаётся параметру strokeStyle или fillStyle, в зависимости от целей.
var gradient = createLinearGradient(0, 0, 100, 1000);
gradient.addColorStop(0, rgb(255, 0, 0));
gradient.addColorStop(0.5. rgb(0, 255, 0));
gradient.addColorStop(1 rgb(0, 0, 255));
context.fillStyle = gradient;
context.fillRect = (0, 0, 100, 100);
Элемент canvas предоставляет готовые решения для работы с тенью элементов, для этого у элемента context, предусмотрены параметры:
shadowColor – задаёт цвет тени;
shadowOffsetX – смещение тени относительно основного объекта по оси X;
shadowOffsetY – смещение тени относительно основного объекта по оси Y;
shadowBlur – размытие тени.
Работа с созданием примитивов, в неявном виде представляет собой работу с геометрическими преобразованиями изображений, однако, можно и явно преобразовывать объекты.
Данные функции, напоминают преобразование объектов в OpenGL. Рассмотрим их:
save() – сохранение текущего состояния холста;
translate(x, y) – перемещение центра координат в точку с координатами x, y;
scale(x, y) – масштабирование холста по оси x и y;
rotate(cornerRadian) – поворот системы координат вокруг начала координат, на угол cornerRadian;
restore() – восстановление ранее сохранённого состояния холста.
Помимо, работы с элементами с помощью заданных функций, можно работать напрямую с пикселями изображений. Для получения информации о них, вызывается функция getImageData(x, y, width, height). Данная функция возвращает объект типа ImageData, который имеет следующие параметры:
width – ширина выбранной области;
height – высота выбранной области;
data – одномерный массив данных, в котором записаны R, G, B и alpha компоненты каждого пикселя. Компоненты задаются целым числом от 0 до 255. Учитывая, что все данные, представлены в одном массиве, то доступ к элементам затруднён, что бы получить доступ к компонентам точки x и y используются следующие формулы:
R = ((width * y) + x) * 4
G = (((width * y) + x) * 4) + 1
B = (((width * y) + x) * 4) + 2
Alpha = (((width * y) + x) * 4) + 3
Обработав пиксели изображения, необходимо выставить его в элемент canvas, для этого используем функцию putImageData(imageData, dx, dy), где imageData – информация о пикселях изображения; dx, dy – координаты точки, куда встраиваем выбранную часть изображения.
Помимо работы с изображением canvas предоставляет функционал для работы с текстом. Для встраивания текста, используются функции:
strokeText(text, x, y, maxWidth);
fillText(text, x, y, maxWidth),
где text – отображаемый текст; x, y – координаты точки, куда мы встраиваем текст; maxWidth – максимальная ширина объекта текста.
Для управления текстом у элемента context предусмотрены следующие параметры:
textAlign – выравнивание точки встраивания текста относительно точки встраивания текста. Возможные варианты изображены на рисунке 3.9.
Рисунок 3.9 – Выравнивание относительно точки встраивания
font – указание параметров шрифта текста
textBaseLine – указание базовой линии текста. Возможные варианты указаны на рисунке 3.10
Рисунок 3.10 – Варианты базовой линии текста