Тени в CSS3

Тени в CSS3.

Разумеется, тени — очень важная составляющая API Canvas (Холст). Тени можно создавать для любых путей и даже для текста. В API для этого предусмотрены четыре свойства:

- shadowColor. Объявляет цвет тени. Синтаксис такой же, как в CSS;

- shadowOffsetX. Ему необходимо передать числовое значение, указывающее, на какое расстояние тень будет отстоять от объекта по горизонтали;

- shadowOffsetY. Ему необходимо передать числовое значение, указывающее, на какое расстояние тень будет отстоять от объекта по вертикали;

- shadowBlur. Создает для тени эффект размытости.

Листинг 7.17. Добавляем тени

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(’2d’);

Canvas. shadowColor="rgba(0,0,0,0.5)"; canvas. shadowOffsetX=4; canvas. shadowOffsetY=4; canvas. shadowBlur=5;

Canvas. font="bold 50px verdana, sans-serif"; canvas. fillText("my message", 100,100);

}

Window. addEventListener("load", initiate, false);

Для определения цвета тени в листинге 7.17 мы используем функцию rgba(). Наша тень полупрозрачная черного цвета. Расстояние между тенью и объектом составляет 4 пиксела, кроме того, тень размывается на 5 пикселов.

Добавьте тени к другим, нетекстовым объектам. Например, попробуйте создать тень для контурной фигуры, затем для фигуры, залитой цветом. Протестируйте ее на прямоугольниках и кругах.

Трансформации в CSS3

API холста поддерживает сложные операции с графическими объектами и с самим холстом. Для выполнения операций используются пять методов трансформации, каждый из которых выполняет определенную задачу:

- translate(x, y). Применяется для переноса начала координат холста. Начало координат, то есть точка с координатами (0, 0), по умолчанию находится в левом верхнем углу холста, в обоих направлениях координаты x и y на холсте увеличиваются. Точки с отрицательными координатами находятся за пределами холста. Однако иногда для создания сложных фигур удобно использовать отрицательные значения. Метод translate() позволяет переместить начало координат в другую точку холста и использовать новое местоположение в качестве точки отсчета для создания рисунков;

- rotate(angle). Поворачивает холст вокруг начала координат на указанный угол;

- scale(x, y). Увеличивает или уменьшает единицы измерения, использующиеся на холсте, увеличивая или уменьшая масштаб всех нарисованных на нем элементов. Масштаб можно менять независимо по горизонтали и по вертикали, указывая соответствующие значения x и y. Также значения параметров могут быть отрицательными — это позволяет создавать зеркальные отражения. Значения по умолчанию равны 1,0;

- transform(m1, m2, m3, m4, dx, dy). Холст характеризуется матрицей значений, описывающих его свойства. Метод transform() применяет новую матрицу трансформаций поверх текущей, модифицируя таким образом весь холст;

- setTransform(m1, m2, m3, m4, dx, dy). Отменяет текущую трансформацию и определяет новую на основе значений, переданных в атрибутах метода.

Листинг 7.18. Трансляция, поворот и масштабирование

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(’2d’);

Canvas. font="bold 20px verdana, sans-serif"; canvas. fillText("TEST",50,20);

Canvas. translate(50,70); canvas. rotate(Math. PI/180*45);

Canvas. fillText("TEST",0,0);

Canvas. rotate(-Math. PI/180*45); canvas. translate(0,100); canvas. scale(2,2);

}

Window. addEventListener("load", initiate, false);

Нет лучшего способа понять, как работают трансформации, чем использование их в программном коде. В листинге 7.18 мы применили методы translate(), rotate() и scale() к одному и тому же тексту. Сначала нарисовали этот текст на холсте в состоянии по умолчанию. Текст выводится в точке (50, 20), а его размер равен 20 пикселам. После этого мы с помощью translate() перенесли начало координат холста в точку (50, 70) и повернули холст на 45°, использовав метод rotate(). Таким образом, во второй раз текст выводится с учетом нового начала координат и наклона 45°. После этого определенные на предыдущем шаге трансформации считаются значениями по умолчанию, поэтому для тестирования метода scale() возвращаем исходное значение поворота, а начало координат переносим еще на 100 пикселов ниже. Наконец, мы удваиваем масштаб холста, поэтому при визуализации очередной строки текст оказывается в два раза крупнее оригинала.

Каждая последующая трансформация накладывается на предыдущие, то есть они не изолированы друг от друга. Например, если выполнить две трансформации scale() одну за другой, то второй метод масштабирует холст с учетом изменений, произошедших после выполнения первого. Применение scale(2, 2) после еще одного такого же scale(2, 2) увеличивает масштаб холста в четыре раза. Матричные методы трансформации также не исключение. Именно поэтому для определения трансформаций на матрице характеристик также существует два метода: transform() и setTransform().

Листинг 7.19. Кумулятивная трансформация на матрице

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(’2d’);

Canvas. transform(3,0,0,1,0,0);

Canvas. font="bold 20px verdana, sans-serif"; canvas. fillText("TEST",20,20);

Canvas. transform(1,0,0,10,0,0);

Canvas. font="bold 20px verdana, sans-serif"; canvas. fillText("TEST",100,20);

}

Window. addEventListener("load", initiate, false);

Так же, как и в предыдущем примере кода, в листинге 7.19 мы применили методы трансформации к одному и тому же тексту, для того чтобы сравнить результаты. Значения матрицы холста по умолчанию равны (1, 0, 0, 1, 0, 0). Поменяв первое значение на 3 в первой трансформации, мы растянули холст по горизонтали. Сразу после этого текст, нарисованный на холсте, оказывается шире, чем при значениях матрицы по умолчанию. Благодаря следующей трансформации холст растягивается по вертикали: мы меняем четвертое значение на 10, сохраняя значения по умолчанию для остальных параметров.

Важно помнить, что все последующие трансформации применяются к матрице холста, уже модифицированной предыдущими трансформациями. Поэтому второй текст, который выводится кодом из листинга 7.19, растягивается как по вертикали, так и по горизонтали. Для того чтобы отменить изменения матрицы и определить совершенно новые значения трансформации, нужно применить метод setTransform().

Попробуйте заменить последний метод transform() в этом примере методом setTransform() и проверьте результат в браузере. Все так же работая только с текстом, поменяйте все значения в методе transform() и посмотрите, какую трансформацию определяет каждое из них.

Вам также могут быть интересны следующие статьи:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *