JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

c.lineWidth = 10; // Половина этой линии толщиной 10 пикселов окажется

// за пределами области отсечения

с.stroke;

// Залить область контура прямоугольника и текста, попавшую в область отсечения

c.fillStyle = "#ааа" // Светло-серый

с.fillRect(175, 25, 50, 325); // Залить вертикальную полосу

c.fillStyle = "#888" //

Темно-серый

с.fillText("<canvas>", 15, 330); // Залить текст

Важно отметить, что при вызове метода

clip

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

clip

может только сжимать область отсечения и не способен расширять ее. Метода, который позволил бы сбросить область отсечения, не существует, поэтому перед вызовом метода

clip

следует вызвать метод

save,

чтобы позднее можно было вернуться к неусеченному контуру вызовом метода

restore

.

21.4.11. Тени

Объект

CanvasRenderingContext2D

имеет четыре свойства графических атрибутов, управляющих рисованием теней. Если присвоить этим свойствам соответствующие значения, любые линии, области, текст или изображения будут отбрасывать тени, что создаст эффект расположения этих элементов над поверхностью холста. На рис. 21.14 показано, как выглядят тени, отбрасываемые закрашенным прямоугольником, контуром прямоугольника и закрашенным текстом.

Рис, 21.14, Автоматически сгенерированные тени

Свойство

shadowColor

определяет цвет тени. Значением по умолчанию является полностью прозрачный черный цвет, и тени остаются невидимыми, если только не присвоить этому свойству значение, соответствующее полупрозрачному или непрозрачному цвету. Этому свойству допускается присваивать только строковые значения цвета: для рисования теней не могут использоваться шаблоны и градиенты. Использование полупрозрачных цветов дает более реалистичное изображение теней из-за просвечивания фона.

Свойства

shadowOffsetX

и

shadowOffsetY

определяют смещение тени по осям X и Y. По умолчанию оба свойства имеют значение 0, что соответствует размещению тени непосредственно под рисунком, где она невидима. Если присвоить обоим свойствам положительные значения, тени будут нарисованы правее и ниже рисунка, как если бы источник света, освещающий холст, находился за пределами экрана левее и выше. Чем больше смещение, тем длиннее отбрасываемая тень и тем «выше» над холстом будет казаться нарисованный объект.

Свойство

shadowBlur

определяет, насколько размытым будет выглядеть край тени. По умолчанию это свойство имеет значение 0, которому соответствую четкие, неразмытые тени. Большие значения производят более сильный эффект

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

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

Пример 21.8. Установка параметров тени

// Определить узкую тень

с.shadowColor = "rgba(100.100,100,.4)”; // Полупрозрачный серый цвет

с.shadowOffsetX = с.shadowOffsetY =3; // Тень смещена вправо вниз

с.shadowBlur = 5; // Размытые границы тени

// Нарисовать текст в синем прямоугольнике с этими параметрами тени

c.lineWidth =10; с.strokeStyle = "blue";

с.strokeRect(100, 100, 300, 200); // Нарисовать прямоугольник

с.font = "Bold 36pt Helvetica";

c.fillText("Hello World", 115, 225); // Нарисовать текст

// Определить более широкую тень. Большие значения смещений создают эффект более высокого

// расположения объекта. Обратите внимание, как полупрозрачная тень смешивается

// с синим контуром прямоугольника,

с.shadowOffsetX = с.shadowOffsetY = 20;

с.shadowBlur = 10;

c.fillStyle = "red"; // Нарисовать сплошной красный прямоугольник,

с.fillRect(50,25,200,65); // располагающийся выше синего прямоугольника

Значения свойств

shadowOffsetX

и

shadowOffsetY

всегда определяются в системе координат по умолчанию и не подвержены действию методов

rotate

и

scale

. Допустим, к примеру, что вы повернули систему координат на 90 градусов, чтобы нарисовать текст по вертикали и затем вернулись к прежней системе координат, чтобы нарисовать текст по горизонтали. Обе текстовые надписи, вертикальная и горизонтальная, будут отбрасывать тень в одном направлении, что обычно соответствует нашим представлениям. Аналогично фигуры, нарисованные с применением различных преобразований, будут иметь тени с одинаковой «высотой». [57]

57

На момент написания этих строк в версии 5 броузера Google Chrome тени были реализованы с ошибкой, и их смещения были подвержены действию преобразований.