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

Последнее обновление: 07.11.2023

Когда применяются такие методы, как fillRect() или fillText(), может потребоваться заранее настроить цвет заливки, шрифт и ряд других свойств глобально для всего объекта. Чтобы сохранить эти настройки, объект контекста предоставляет метод save(). Каждый раз, когда вызывается этот метод, текущие настройки canvas помещаются в стек и сохраняются. Чтобы в последующем обратно получить сохраненные настройки, применяется метод restore(). Подобное сохранение-восстановление настроек может быть полезно, когда нам необходимо применять к части фигур глобальные общие настройки, а к другой части фигур - локальные.

Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// Рисуем прямоугольник с настройками по умолчанию  
// Цвет заливки по умолчанию - черный
context.fillRect(0, 0, 150, 150); 
// Сохраняем текущее состояние (назовем его состояние 1)
context.save();                      

// Изменяем настройки - устанавливаем в качестве цвета заливки - зеленый
context.fillStyle = "#7ed6df";        
context.fillRect(15, 15, 120, 120);  // рисуем прямоугольник с новыми настройками
// Сохраняем текущее состояние (назовем его состояние 2)
context.save();

// Изменяем настройки - устанавливаем в качестве цвета заливки - красный
context.fillStyle = "#ff7979";
context.fillRect(30, 30, 90, 90);    // Рисуем прямоугольник с новыми настройками                                 

context.restore();		// Загружаем предыдущее состояние (состояние 2)  
context.fillRect(45, 45, 60, 60);    // Рисуем прямоугольник с предыдущими настройками (зеленый цвет)

context.restore();		// Загружаем предыдущее состояние (состояние 1)  
context.fillRect(60, 60, 30, 30);    // Рисуем прямоугольник с предыдущими настройками (черный цвет)
</script>
</body>
</html>
Сохранение и восстановление состояния canvas в JavaScript

Здесь сначала создается квадрат высотой 150 пикселей и шириной 150 пикселей с использованием настроек по умолчанию (цвет заливки по умолчанию черный). Вызвав save(), мы сохранием эти значения по умолчанию в стек. Затем цвет заливки устанавливается на значение "#7ed6df" (оттенок зеленого цвета), и создается квадрат немного меньшего размера (смещением по горизонтали и вертикали). Повторный вызов save() также сохранит эти настройки в стек. Далее цвет фона устанавливается в "#ff7979" (разновидность красного), и снова рисуется квадрат меньшего размера.

Затем вызов restore() загружает настройки, которые были последними сохранены в стеке, то есть те, в которых цвет заливки был установлен на зеленый (поэтому созданный впоследствии квадрат имеет этот цвет). Таким же образом второй вызов функции restore() затем загрузит начальные настройки, где применяется черный цвет.

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм