Можностей, предоставляемых веб-разработчикам


СОХРАНЕНИЕ И ВОССТАНОВЛЕНИЕ УСЛОВИЙ РИСОВАНИЯ



Pdf көрінісі
бет207/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   203   204   205   206   207   208   209   210   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

СОХРАНЕНИЕ И ВОССТАНОВЛЕНИЕ УСЛОВИЙ РИСОВАНИЯ
В 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();
}




Достарыңызбен бөлісу:
1   ...   203   204   205   206   207   208   209   210   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет