Восстановление состояния

Из-за накопительного эффекта трансформаций возвращаться к предыдущим состояниям холста становится довольно сложно. Например, для написания кода в листинге 7.18 приходилось запоминать, на какой угол мы повернули холст, для того чтобы в следующем методе вернуть его в исходное положение. Решить эту проблему помогают предоставляемые API Canvas (Холст) методы сохранения и восстановления состояния холста:

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

— restore(). Восстанавливает последнее сохраненное состояние.

Листинг 7.20. Сохранение состояния холста

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);

Canvas. save();

Canvas. translate(50,70);

Canvas. font="bold 20px verdana, sans-serif"; canvas. fillText("TEST1",0,30); canvas. restore();

Canvas. fillText("TEST2",0,30);

}

Window. addEventListener("load", initiate, false);

Выполнив код из листинга 7.20 в своем браузере, вы увидите текст «TEST1», написанный крупными буквами в центре холста, и текст «TEST2» более мелким шрифтом рядом с началом координат. Мы сохранили состояние холста по умолчанию, а затем определили новое начало координат и стили оформления текста. Прежде чем выводить на холст вторую порцию текста, мы восстановили сохраненное состояние. Таким образом, второй текст визуализируется с учетом стилей по умолчанию, а не тех, которые мы объявили для первой строки.

Независимо от того, как много трансформаций вы применяете к холсту, при вызове метода restore() в точности восстанавливается предыдущее сохраненное состояние холста.