1.3.2 Работа с графическими элементами
Рассмотрим отображение 2D элементов на странице. Для работы с графикой используется элемент canvas. Элемент canvas впервые предложен корпорацией Apple в 2004 году, и использовался для создания дополнений к браузеру. На сегодняшний день 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');}
Результат работы данного кода изображён на рисунке 1.3.
Также, canvas поддерживает работу с кривыми линиями. Поддерживаются следующие кривые:
Рисунок 1.3 – Результат отображения кода
кривая Безье. Строится с помощью функции bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y). cpx1, cpy1 – координаты первой контрольной точки; cpx2, cpy2 – координаты второй контрольной точки; x, y – координаты конца прямой. В качестве координат начала берётся текущая позиция пера. Принцип построения кривой отображён на рисунке 1.4.
квадратическая кривая. Строится с помощью функции quadricCurveTo(cpx, cpy, x, y): cpx, cpy – координаты контрольной точки; x, y – координаты конца прямой. В качестве координат начала берётся текущая позиция пера. Принцип построения кривой отображён на рисунке 1.5. Ниже приведен пример рисования квадратической кривой:
Рисунок 1.4 – Построение
кривой Безье
Рисунок 1.5 – Построение
квадратической кривой
context.moveTo(75,25);
context.quadraticCurveTo(25,25,25,62.5);
context.quadraticCurveTo(25,100,50,100);
context.quadraticCurveTo(50,120,30,125);
context.quadraticCurveTo(60,120,65,100);
context.quadraticCurveTo(125,100,125,62.5);
context.quadraticCurveTo(125,25,75,25);
context.stroke();
Результат приведенного фрагмента рисования приведено на рисунке 1.6.
Рисунок 1.6 – Отображение результата приведенного фрагмента рисования
дуга строится с помощью функции arcTo(x1, y1, x2, y2, radius), где x1, y1; x2, y2 – координаты первой и второй контрольной точек соответственно; radius – радиус дуги. Принцип построения кривой отображён на рисунке 1.7.
Рисунок 1.7 – Построение дуги
Все фигуры, которые Были построены до текущего момента, имели один стиль отображения. Для изменения стиля нарисованных элементов объект context элемента canvas имеет следующие параметры:
lineWidth – ширина отображаемой линии в пикселях (по умолчанию 1);
lineJoin – тип соединения линий round – скруглённое соединение, bevel – срезанное, mittel – прямое (по умолчанию mittel). Примеры отображаемых линий приведены на рисунке 1.8;
Рисунок 1.8 – Типы соединения линий
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). Пример градиента отображён на рисунке 1.9.
радиальный. Создаётся функцией createRadialGradient(x0, y0, r0, x1, y1, r1), и представляет собой две окружности, заданные своими координатами и радиусами. Пример градиента отображён на рисунке 1.10.
Рисунок 1.9 – Линейный градиент
Рисунок 1.10 – Радиальный градиент
Для указания цветов градиента, у этого объекта существует метод addColorStop(gradientPart, color), где gradientPart – часть градиента, которая представляется, как число с плавающей точкой от 0 (начало градиента), до 1 (конец градиента), color – цвет в указанной точке. Далее объект градиент передаётся параметру strokeStyle или fillStyle, в зависимости от целей.
var canvas = document.getElementById('picture');
var context = canvas.getContext('2d');
var grad = context.createLinearGradient(150,0,150,150);
grad.addColorStop(0,'rgb(255, 0, 0)');
grad.addColorStop(0.5,'rgb(0, 255, 0)');
grad.addColorStop(1,'yellow');
context.fillStyle = grad;
context.fillRect(0,0,150,150);
Элемент 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 – выравнивание точки встраивания текста относительно точки встраивания текста. Возможные варианты изображены на рисунке 1.11.
Рисунок 1.11 – Выравнивание относительно точки встраивания
font – указание параметров шрифта текста
textBaseLine – указание базовой линии текста. Возможные варианты указаны на рисунке 1.12.
Рисунок 1.12 – Варианты базовой линии текста