API Canvas (Холст) — краткий справочник

API Canvas (Холст) — краткий справочник.

API Canvas (Холст), вероятно, самый сложный и объемный во всей спецификации HTML5. Он предоставляет несколько методов и свойств для создания графических приложений на базе элемента <canvas>.

Методы

В API Canvas (Холст) входят следующие методы:

— getContext(context). Создает контекст для холста, на котором вы затем будете рисовать. Принимает одно из двух значений: 2d или 3d для двухмерной и трехмерной графики соответственно;

— fillRect(x, y, width, height). Позволяет нарисовать прямо на холсте, в точке (x, y), залитый цветом прямоугольник со сторонами width и height;

— strokeRect(x, y, width, height). Рисует прямо на холсте, в точке (x, y), прямоугольный контур со сторонами width и height;

— clearRect(x, y, width, height). Очищает на холсте прямоугольную область, координаты и размеры которой заданы его атрибутами;

— createLinearGradient(x1, y1, x2, y2). Создает линейный градиент, который затем можно привязать к фигуре, как любой другой цвет, — через свойство fillStyle. В атрибутах необходимо указать только начальную и конечную позиции градиента (относительно холста). Для объявления цветов градиента данный метод необходимо сочетать с методом addColorStop();

— createRadialGradient(x1, y1, r1, x2, y2, r2). Создает радиальный градиент, который затем можно привязать к фигуре, как любой другой цвет, — через свойство fillStyle. Градиент состоит из двух окружностей. Атрибуты метода определяют только позиции и радиусы окружностей (относительно холста). Для объявления цветов градиента данный метод необходимо сочетать с методом addColorStop();

— addColorStop(position, color). Применяется для объявления цветов градиента. Атрибут position принимает значение от 0,0 до 1,0 и указывает, в какой точке цвет начинает растворяться;

— beginPath(). Используется для объявления начала нового пути;

— closePath(). Можно добавить в конце пути, для того чтобы закрыть его. Создает прямую линию между последней позицией пера и начальной точкой пути. Метод не обязательно применять в случаях, когда путь должен оставаться открытым или когда для визуализации пути используется метод fill();

— stroke(). Предназначен для визуализации контура пути;

— fill(). Предназначен для визуализации пути как фигуры, залитой сплошным цветом;

— clip(). Применяется для создания новой области обрезки в форме пути. Если графические объекты отправляются на холст после вызова данного метода, то отображаются только те их фрагменты, которые попадают внутрь фигуры;

— moveTo(x, y). Переносит виртуальное перо в новое местоположение. Следующий метод продолжит рисование пути с этой точки;

— lineTo(x, y). Добавляет к пути прямую линию, начиная от текущей позиции пера и до точки, определяемой атрибутами x и y;

— rect(x, y, width, height). Добавляет к пути прямоугольник в точке (x, у) со сторонами width и height;

— arc(x, y, radius, startAngle, endAngle, direction). Добавляет к пути дугу. Центр дуги находится в точке (x, у), начальный и конечный углы объявляются в радианах, а direction — это булево значение, указывающее направление: по часовой стрелке или против часовой стрелки. Для преобразования градусов в радианы используйте формулу Math. PI/180 х градусы;

— quadraticCurveTo(cpx, cpy, x, y). Добавляет к пути квадратичную кривую Безье. Кривая начинается в текущей позиции пера и заканчивается в точке (x, у). Атрибуты cpx и cpy определяют позицию контрольной точки, которая задает форму кривой;

— bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y). Добавляет к пути кубическую кривую Безье. Кривая начинается в текущей позиции пера и заканчивается в точке (x, у). Атрибуты cp1x, cp1y, cp2x и cp2y определяют позиции двух контрольных точек, которые задают форму кривой;

— strokeText(text, x, y, max). Рисует контурный текст прямо на холсте. Атрибут max необязательный, он задает максимальный размер текста;

— fillText(text, x, y, max). Рисует прямо на холсте текст, представляющий собой залитые цветом фигуры. Атрибут max необязательный, он задает максимальный размер текста;

— measureText(text). Вычисляет размер области, которую текст займет на холсте при визуализации с текущими стилями. Для обращения к получившемуся значению используется свойство width;

— translate(x, y). Переносит начало координат холста в точку (x, у). Первоначально точка с координатами (0, 0) находится в верхнем левом углу области, соответствующей элементу <canvas>;

— rotate(angle). Поворачивает холст вокруг начала координат. Величину угла нужно указывать в радианах. Для преобразования градусов в радианы используйте формулу Math. PI/180 х градусы;

— scale(x, y). Меняет масштаб холста. Значения по умолчанию (1,0, 1,0). Можно также задавать отрицательные значения;

— transform(m1, m2, m3, m4, dx, dy). Модифицирует матрицу трансформации холста. Новые значения матрицы вычисляются на основе предыдущих;

— setTransform(m1, m2, m3, m4, dx, dy). Модифицирует матрицу трансформации холста. Отменяет предыдущие модификации матрицы и задает новые значения;

— save(). Сохраняет текущее состояние холста, включая значения матрицы трансформации, свойства стилизации и маску обрезки;

— restore(). Восстанавливает последнее сохраненное состояние холста, включая матрицу трансформации, свойства стилизации и маску обрезки;

— drawImage(). Выводит на холст изображение и поддерживает три варианта синтаксиса. Синтаксис drawImage(image, x, y) позволяет вывести изображение на холст в точке (x, y). Синтаксис drawImage(image, x, y, width, height) позволяет вывести изображение на холст в точке (x, y), с новыми размерами, определяемыми параметрами width и height. Синтаксис drawImage(image, x1, y1, width1, height1, x2, y2, width2, height2) позволяет вырезать из исходного изображения часть, определяемую параметрами x1, y1, widthl и heightl, и вывести ее на холст в точке (x2, y2) с новыми размерами width2 и height2;

— getImageData(x, y, width, height). Считывает содержимое фрагмента холста и сохраняет его в виде объекта. К значениям объекта можно обращаться через свойства width, height и data. Первые два свойства возвращают размер вырезанного фрагмента изображения, а свойство data возвращает массив значений, описывающих цвета пикселов. Для доступа к значениям используйте формулу (width х y) + (x х 4);

— putImageData(imagedata, x, y). Визуализирует данные, сохраненные в объекте imagedata, как изображение на холсте;

— createImageData(width, height). Создает новое изображение в формате набора данных. Первоначально все пикселы изображения черные прозрачные. Вместо параметров width и height метод может принимать в качестве атрибута данные изображения. В таком случае размер

Нового изображения соответствует размеру, закодированному в этом наборе данных;

— createPattern(image, type). Создает на основе данных изображения узор, который затем можно привязать к фигуре с помощью свойства fillStyl e, как любой другой цвет. Возможные значения атрибута type — repeat, repeat-x, repeat-y и no-repeat.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *