При выполнении преобразования изменяется только система координат канвы. Рисуемая после этого графика будет создаваться в измененной системе координат; а нарисованная графика остается неизменной.
Сохранение и загрузка состояния
Первое, что нам нужно рассмотреть применительно к преобразованиям, — сохранение и загрузка состояния канвы. Эти возможности нам очень пригодятся в дальнейшем.
При сохранении состояния канвы сохраняются:
— все заданные трансформации (будут описаны далее);
— значения свойств globalAlpha, globalCompositeOperation (будет описано далее), fillStyle, lineCap, lineJoin, lineWidth, miterLimit и strokeStyle;
— все заданные маски (будут описаны далее).
Сохранение состояния канвы выполняет метод save. Он не принимает параметров и не возвращает результата.
Состояние канвы сохраняется в памяти компьютера и впоследствии может быть восстановлено. Более того, сохранять состояние канвы можно несколько раз; при этом все предыдущие состояния остаются в памяти и их также можно восстановить.
Восстановить сохраненное ранее состояние можно вызовом метода restore. Он не принимает параметров и не возвращает результата.
При вызове этого метода будет восстановлено самое последнее из сохраненных состояний канвы. При последующем его вызове будет восстановлено предпоследнее сохраненное состояние и т. д. Этой особенностью часто пользуются для создания сложной графики.
Перемещение начала координат канвы
Мы можем переместить начало координат канвы в любую другую ее точку. После этого все координаты будут отсчитываться от нового начала координат.
Для перемещения начала координат канвы в другую точку достаточно вызвать метод translate:
<контекст рисования>.translate(<горизонтальная координата>,<вертикальная координата>)
Параметры метода translate определяют координаты точки, в которой должно находиться новое начало координат канвы. Они отсчитываются от текущего начала координат, измеряются в пикселах и задаются в виде чисел. Метод не возвращает результата.
При перемещении начала координат канвы будут учитываться все трансформации, примененные к канве ранее. Значит, если мы ранее переместили начало координат в точку [50,50] и теперь снова перемещаем его, уже в точку [100,50], в результате начало координат окажется в точке [150,100], если отсчитывать от верхнего левого угла канвы (начала системы координат по умолчанию).
Листинг 22.12 иллюстрирует пример.
Листинг 22.12
ctxCanvas.save();
ctxCanvas.translate(100, 100);
ctxCanvas.fillRect(0, 0, 50, 50);
ctxCanvas.translate(100, 100);
ctxCanvas.fillRect(0, 0, 50, 50);
ctxCanvas.restore();
ctxCanvas.fillRect(0, 0, 50, 50);
Web-сценарий из листинга 22.12 делает следующее:
1. Сохраняет текущее состояние канвы.
2. Перемещает начало координат в точку [100,100].
3. Рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в точке начала координат.
4. Опять перемещает начало координат в точку [100,100]. Обратим внимание, что координаты этой точки теперь отсчитываются от нового начала системы координат, установленного предыдущим вызовом метода translate.
5. Опять рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.
6. Восстанавливает сохраненное состояние канвы, в том числе и положение начала системы координат (это положение по умолчанию, т. е. верхний левый угол канвы).
7. Рисует третий по счету квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.
В результате мы увидим три квадрата, расположенные на воображаемой диагонали, тянущейся от верхнего левого угла канвы вниз и вправо.
ВНИМАНИЕ!
К сожалению, не существует простого способа вернуться к системе координат по умолчанию. Единственная возможность — сохранить состояние системы координат перед любыми трансформациями и потом восстановить его.
Поворот системы координат
Метод rotate позволяет повернуть оси системы координат на произвольный угол вокруг точки начала координат; при этом поворот будет выполняться по часовой стрелке:
<контекст рисования>.rotate(<угол поворота>)
Единственный параметр метода задает угол поворота системы координат в виде числа в радианах; этот угол отсчитывается от горизонтальной оси. Метод не возвращает результата.
При повороте системы координат будут учитываться все трансформации, примененные к канве ранее. Так, если мы ранее переместили начало системы координат в другую точку и теперь поворачиваем систему координат на какой-то угол, она будет повернута вокруг нового начала координат. А если мы после этого снова повернем систему координат на какой-то угол, она будет повернута относительно текущего положения горизонтальной оси — уже повернутой ранее.
Листинг 22.13 иллюстрирует пример.
Листинг 22.13
ctxCanvas.translate(200, 150);
for (var i = 0; i < 3; i++)
{ ctxCanvas.rotate(Math.PI / 6); ctxCanvas.strokeRect(-50, -50, 100, 100);
}
Web-сценарий из листинга 22.13 сдвигает начало координат в центр канвы (точку [200,150]), после чего трижды поворачивает систему координат на π/6 радиан (30°) и рисует в центре канвы квадрат без заливки. Обратим внимание, что каждый последующий поворот системы координат выполняется с учетом того, что она уже была повернута ранее.
Изменение масштаба системы координат
Метод scale дает возможность изменить масштаб системы координат канвы в бóльшую или меньшую сторону:
<контекст рисования>.scale(<масштаб по горизонтали>,<масштаб по вертикали>)
Параметры этого метода задают масштаб для горизонтальной и вертикальной оси системы координат в виде чисел. Числа меньше 1.0 задают уменьшение масштаба, а числа больше 1.0 — увеличение; если нужно оставить масштаб по какой-то из осей неизменным, достаточно указать значение 1.0 соответствующего параметра. Метод scale не возвращает результата.
При изменении масштаба координат канвы будут учитываться все трансформации, примененные к канве ранее: перемещения начала координат, повороты и изменения масштаба.
Листинг 22.14 иллюстрирует пример.
Листинг 22.14
ctxCanvas.save();
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.scale(3, 1);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
ctxCanvas.save();
ctxCanvas.scale(1, 3);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
ctxCanvas.save();
ctxCanvas.scale(3, 3);
ctxCanvas.strokeRect(0, 0, 50, 50);
ctxCanvas.restore();
Web-сценарий из листинга 22.14 делает следующее:
1. Сохраняет текущее состояние канвы.
2. Рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.
3. Увеличивает масштаб горизонтальной координатной оси в 3 раза.
4. Рисует второй квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.
5. Восстанавливает сохраненное ранее состояние канвы и сохраняет его снова.
6. Увеличивает масштаб вертикальной координатной оси в 3 раза.
7. Рисует третий квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.
8. Восстанавливает сохраненное ранее состояние канвы и сохраняет его снова.
9. Увеличивает масштаб обоих координатных осей в 3 раза.
10. Рисует четвертый квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.
11. Восстанавливает сохраненное ранее состояние канвы.
В результате мы увидим четыре прямоугольника с реальными размерами 50 50, 150 50, 50 150 и 150 150 пикселов.
Управление наложением графики
Когда мы рисуем новую фигуру на том месте канвы, где уже присутствует ранее нарисованная фигура, новая фигура накладывается на старую, перекрывая ее. Это поведение канвы по умолчанию, которое мы можем изменить.
Для управления наложением графики предусмотрено свойство
globalCompositeOperation.
Вот его допустимые значения:
— "source-over" — новая фигура накладывается на старую, перекрывая ее (значение по умолчанию);
— "destination-over" — новая фигура перекрывается старой;
— "source-in" — отображается только та часть новой фигуры, которая накладывается на старую. Остальные части новой и старой фигур не выводятся;
— "destination-in" — отображается только та часть старой фигуры, на которую накладывается новая. Остальные части новой и старой фигур не выводятся;
— "source-out" — отображается только та часть новой
