Сохранение и восстановление состояния в Canvas

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

Использование методов save() и restore()

Существуют два метода для сохранения и восстановления состояния:

• Метод save() сохраняет текущее состояние контекста рисования на стеке состояний.
• Метод restore() восстанавливает последнее сохраненное состояние контекста рисования из стека состояний.

// Сохраняем текущее состояние
ctx.save(); 

// Выполняем изменения состояния (например, изменяем преобразования, стили и т. д.)
// ...

// Восстанавливаем предыдущее состояние
ctx.restore();

Пример:

// Рисуем круг до изменений
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

// Сохраняем текущее состояние
ctx.save();

// Применяем преобразование
ctx.translate(200, 0);
ctx.rotate(Math.PI / 4);

// Рисуем круг после изменений
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

// Восстанавливаем предыдущее состояние
ctx.restore();

// Рисуем круг после восстановления
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

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

Результат: