Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Создание тени у рисуемой графики

Создание тени у рисуемой графики

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

Свойства shadowOffsetX и shadowOffsetY задают смещение тени, соответственно, по горизонтали и вертикали относительно фигуры в пикселах в виде чисел. Положительные значения смещают тень вправо и вниз, а отрицательные — влево и вверх. Значения этих свойств по умолчанию — 0, т. е. фактически отсутствие тени.

Пример:

ctxCanvas.shadowOffsetX = 2;

ctxCanvas.shadowOffsetY = -2;

Свойство shadowBlur задает степень размытия тени в виде числа. Чем больше это число, тем более размыта тень. Значение по умолчанию — 0, т. е. отсутствие размытия.

Пример:

ctxCanvas.shadowBlur = 4;

Свойство shadowColor задает цвет тени. Цвет задается в виде строки в любом из форматов, описанных в начале этой главы. Значение по умолчанию — черный непрозрачный цвет.

Пример:

ctxCanvas.shadowColor = "rgba(128, 128, 128, 0.5)";

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

Пример:

ctxCanvas.fillText("Двое: я и моя тень.", 150, 50);

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