JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

Одна из ролей объектов

ImageData
– служить «временным хранилищем» для содержимого холста. Сохранение копии холста (с использованием метода
getImageData)
позволяет временно наносить на холст изображения и затем восстанавливать прежнее состояние холста с помощью
putlmageData.

void quadraticCurveTo(double срх, еру, х, у)

Данный метод добавляет кривую Безье второго порядка в текущий подконтур. Начальная точка кривой находится в текущей позиции, а координаты конечной точки определяются аргументами х и у. Форма кривой Безье, соединяющей эти две точки, определяется контрольной точкой (срХ, cpY). По возвращении из метода текущей позицией становится точка (х,у). Обратите также внимание на метод

bezierCurveTo.

void rect(double х, у, tv, h)

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

с.moveTo(x,у);

с.lineTo(x+w, у);

с.lineTo(x+w, y+h);

c.lineTo(x, y+h);

c.closePath;

void restore

Метод снимает с вершины стека значения параметров холста и записывает их в свойства объекта

CanvasRenderingContext2D
, восстанавливая область отсечки и матрицу преобразования. Дополнительные сведения см. в справочной статье save.void

rotate(double angle)

Данный метод изменяет текущую матрицу преобразования таким образом, что любые фигуры, нарисованные после вызова этого метода, выглядят повернутыми на указанный угол. Этот метод не выполняет вращение самого элемента

<canvas>.
Обратите внимание: угол задается в радианах. Чтобы преобразовать градусы в радианы, нужно умножить величину угла на константу
Math. PI
и разделить на число 180.

void save

Метод

save
помещает копию текущих параметров холста на вершину стека сохраняемых параметров. Это позволяет внести временные изменения в какие-либо параметры и затем восстановить предыдущие значения вызовом метода
restore.
В перечень сохраняемых параметров входят все свойства объекта
CanvasRenderingContext2D
(за исключением доступного только для чтения свойства
canvas
), а также матрица преобразования, которая является результатом вызова методов
rotate, scale
и
translate
. Кроме того, в стеке сохраняется область отсечки, созданная методом
clip
. Однако следует заметить, что текущие контур и позиция пера не входят в данный перечень и этим методом не сохраняются,

void scale(double sx, double sy)

Метод

scale
добавляет преобразование масштаба в текущую матрицу преобразования холста. Масштабирование выполняется отдельно по горизонтали и по вертикали. Например, если передать методу значения 2.0 и 0.5, все последующие фигуры будут иметь в два раза большую ширину и в два раза меньшую высоту по сравнению с тем, как они выглядели бы, если бы они были нарисованы до вызова метода
scale.
Отрицательные значения аргумента sx вызывают зеркальное отражение координат относительно оси Y, а отрицательные значения аргумента sy вызывают зеркальное отражение координат относительно оси X.

void setTransform(double a, b, с, d, е, f)

Этот метод позволяет напрямую установить матрицу преобразования, не выполняя последовательность вызовов методов

translate, scale
и
rotate.
После вызова этого метода новое преобразование будет иметь вид:

х' а с е х = ах+су+е

y' = b d f x y = bx+dy+f

1 0 0 1 1

void stroke

Метод

stroke
выполняет рисование линий, составляющих текущий контур. Контур определяет лишь геометрию линии, которая должна быть воспроизведена, а визуальное ее представление зависит от значений свойств
strokeStyle, lineWidth, lineCap, lineJoin
и
miterLimit
.

Под термином stroke (чертить) понимается вычерчивание линий пером или кистью. Это означает «нарисовать контур». В противовес методу

stroke,
метод
fill
выполняет заливку внутренней области без рисования ее контура,