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

21.4.11. Тени

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]

Оглавление книги