СОХРАНЕНИЕ И ВОССТАНОВЛЕНИЕ УСЛОВИЙ РИСОВАНИЯ В API 2D можно найти еще кое-что замечательное: условия рисования. У объекта контекста
есть два метода,
save
и
restore
, которые позволяют управлять текущим стеком условий
рисования. Метод
save
вталкивает текущие условия в стек, а метод
restore
выталкивает
набор условий, находящийся наверху стека.
Условия рисования описывают не все, что происходит на холсте, а лишь следующее:
трансформации;
области отсечения (в этой книге не рассматриваются);
текущие значения атрибутов
fillStyle
,
font
,
globalAlpha
,
globalCompositeOperation
,
lineCap
,
lineJoin
,
lineWidth
,
miterLimit
,
shadowBlur
,
shadowColor
,
shadowOffsetX
,
shadowOffsetY
,
strokeStyle
,
textAlign
и
textBaseline
.
Например, следующий фрагмент кода из учебника по работе с холстами в Mozilla демон-
стрирует, как нарисовать на холсте 50 звездочек в случайных точках. Позиции устанавли-
ваются методом
translate
. Однако в конце каждой итерации цикла восстанавливается
исходное состояние холста, то есть верхний левый угол холста перемещается в реальный
верхний левый угол окна, а не остается в позиции, установленной последним
translate
:
for (var j=1;j<50;j++){
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75-Math.floor(Math.random()*150),
75-Math.floor(Math.random()*150));
drawStar(ctx,Math.floor(Math.random()*4)+2);
ctx.restore();
}
