Состояния Canvas в HTML5

Когда мы рисуем графики на канвасе, часто нам нужно изменять состояние 2d контекста с помощью save() и restore(). Например, когда вы рисуете прямую или прямоугольник, вам может потребоваться один strokStyle, а для следующей прямой или прямоугольника может потребоваться другой strokStyle. Или разные цвета заливки, углы поворота и т.д.

Когда вы рисуете на HTML5 канвасе с помощью его 2d контекста, 2d контекст находится в определенном состоянии. Вы можете установить это состояние, манипулируя свойствами 2d контекста (например, fillStyle и strokeStyle). Все эти операции в совокупности называются состоянием 2d контекста.
Обычно, когда вы рисуете на канвасе, вам нужно изменять состояние 2d контекста в процессе рисования. Например, strokStyle для прямой или прямоугольника может потребоваться один, а strokStyle для других прямых или прямоугольников может потребоваться другой. Или другие轮流ки, или другие.
Из-за того, что перед рисованием каждого形状 необходимо устанавливать полный статус, его можно推送 в стек состояний. Затем можно извлечь более раннее состояние из этого стека. Это быстрый способ восстановить более раннее состояние после временных изменений состояния.

Пример состояния HTML5 Canvas для рисования

Методы для сохранения и извлечения состояний для рисования таковы:

context.save(); // Вставляет одно состояние в стек состояний.
context.restore(); // Выводит самое первое состояние из стека и устанавливает его в 2d контекст.

После сохранения в стек вы можете推送 несколько состояний на этот стек, а затем извлечь их. Вот пример кода:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">HTML5 Canvas не поддерживается</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#66ff66";
context.strokeStyle = "#990000";
context.lineWidth = 5;
context.fillRect(5, 5, 50, 50);
context.strokeRect(5, 5, 50, 50);
context.save();
context.fillStyle = "#6666ff";
context.fillRect(65, 5, 50, 50);
context.strokeRect(65, 5, 50, 50);
context.save();
context.strokeStyle = "#000099";
context.fillRect(125, 5, 50, 50);
context.strokeRect(125, 5, 50, 50);
context.restore();
context.fillRect(185, 5, 50, 50);
context.strokeRect(185, 5, 50, 50);
context.restore();
context.fillRect(245, 5, 50, 50);
context.strokeRect(245, 5, 50, 50);
</script>

Это результат кода, нарисованного на холсте:

Польза состояния стека

Если вы изменяете режим слияния холста или настройки преобразования и вам нужно вернуться к настройкам до изменения, состояние стека очень полезно. Через сохранение и восстановление режима слияния или настроек преобразования можно обеспечить правильное восстановление. В противном случае, возвращение к точным настройкам может быть несколько сложным.

Какие состояния у 2D-контекста?

Все 2D-атрибуты контекста сохраняются и восстанавливаются как часть состояния. Однако, что нарисовано на холсте, не сохраняется. Это означает, что при восстановлении состояния вы не восстанавливаете саму область рисования. Вы только восстанавливаете настройки 2D-контекста (значения свойств). Эти настройки включают:

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• Область обрезки

• Матрица преобразования (через context.rotate() + вращение + трансформация context.setTransform())

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