Сохранение и загрузка состояния

Первое, что нам нужно рассмотреть применительно к преобразованиям, — сохранение и загрузка состояния канвы. Эти возможности нам очень пригодятся в дальнейшем.

При сохранении состояния канвы сохраняются:

- все заданные трансформации (будут описаны далее);

- значения свойств globalAlpha, globalCompositeOperation (будет описано далее), fillStyle, lineCap, lineJoin, lineWidth, miterLimit и strokeStyle;

- все заданные маски (будут описаны далее).

Сохранение состояния канвы выполняет метод save. Он не принимает параметров и не возвращает результата.

Состояние канвы сохраняется в памяти компьютера и впоследствии может быть восстановлено. Более того, сохранять состояние канвы можно несколько раз; при этом все предыдущие состояния остаются в памяти и их также можно восстановить.

Восстановить сохраненное ранее состояние можно вызовом метода restore. Он не принимает параметров и не возвращает результата.

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

Перемещение начала координат канвы

Мы можем переместить начало координат канвы в любую другую ее точку. После этого все координаты будут отсчитываться от нового начала координат.

Для перемещения начала координат канвы в другую точку достаточно вызвать метод translate:

<контекст рисования>.translate(<горизонтальная координата>, <вертикальная координата>)

Параметры метода translate определяют координаты точки, в которой должно находиться новое начало координат канвы. Они отсчитываются от текущего начала координат, измеряются в пикселах и задаются в виде чисел. Метод не возвращает результата.

При перемещении начала координат канвы будут учитываться все трансформации, примененные к канве ранее. Значит, если мы ранее переместили начало координат в точку [50,50] и теперь снова перемещаем его, уже в точку [100,50], в результате начало координат окажется в точке [150,100], если отсчитывать от верхнего левого угла канвы (начала системы координат по умолчанию).

Задание 11. Реализуйте приведенный в листинге 17.12 Web-сценарий.