Предыдущий ролик Следующий ролик  

Видео урок: Создание теней

HTML5: графика и анимация с Canvas

В этой главе мы рассмотрим, как использовать более сложные техники рисования canvas, и первой из них является техника создания теней. Есть четыре атрибута, которые вы можете использовать, чтобы создавать тени на рисующей поверхности canvas. На все операции по рисованию, которые происходят в canvas, влияют эти атрибуты. Это включает в себя контуры, рисунки, текст, линии и так далее. Когда вы рисуете тени, они могут быть окрашены, они могут быть смещены в обоих направлениях X и Y, а также у них может быть значение затемнения (blur).

И по факту, вот доступные свойства, которые можно использовать при рисовании теней. Первое свойство - это shadowColor, и это цвет, который вы используете при рисовании тени. И опять же, как и в других местах, где вы можете установить цвет, вы можете использовать любой цвет CSS, чтобы указать нужный вам. Если вы никакой цвет не указали, то по умолчанию это будет прозрачный черный. Свойства OffsetX и OffsetY сами по себе довольно понятны. Они контролируют горизонтальное смещение тени, по умолчанию это 0, и вертикальное смещение тени, по умолчанию это тоже 0.

И, наконец, есть свойство Blur, которое вы также можете установить для тени. По умолчанию оно равно 0, но для достижения какого-то визуального эффекта, значение должно быть больше 0. Давайте вернемся к коду и посмотрим, как рисовать тени. Открываем файл shadows_start, он находится в папке для главы 06. Давайте быстренько посмотрим на него в браузере, видим shadows_start.

Сейчас у нас есть пустой canvas, который виден только по пунктирной окаймовке. Возвращаемся обратно к коду. В файле Snippets в разделе Shadows я копирую несколько строк кода. Этот первый набор строк устанавливает базовые настройки для теней, я копирую их и переношу в раздел, где мы тестировали canvas и получили контекст. Установим некоторые настройки для теней, вот я устанавливаю shadowColor на black, а смещение (Offsets) на 10 pixels для обоих X и Y, также я добавляю немного фактора Blur.

Теперь я копирую первый пример. Берем эти строки и вставляем их сюда. В данном случае мы создали прямоугольник, используя функцию fillRect, а также функцию fillStyle. fillStyle заполнит прямоугольник синим цветом, с opacity = 100%, прямоугольник будет 200 пикселей шириной и 100 высотой. А поскольку мы установили здесь несколько свойств для теней, за прямоугольником у нас будет стоять тень.

Вернемся в браузер и обновим страницу. Вы видите синий прямоугольник, а за ним тень. Давайте посмотрим на этот пример в других браузерах. Просто кликаем правой клавишей мышки и говорим Open with. Теперь давайте посмотрим в Firefox. В Firefox результат такой же. Тень есть. Открываем в Opera. И вы видите тень вокруг объекта в браузере Opera. Ну и еще один браузер. Открываем пример в Chrome.

И в Chrome все на месте. Вокруг объекта есть тень. Возвращаемся к коду. Берем другой пример. В данном случае мы используем текст. Давайте посмотрим, как будет выглядеть тень для текста. Возвращаемся и вставляем сюда эти строки. У нас есть текстовая строка, fillStyle устанавливаем на green. А вот здесь я меняю цвета тени.

На сей раз тень - это комбинация зеленого и синего цветов прозрачностью в 50%. Я меняю Offset, я меняю Blur, а также меняю размер шрифта, чтобы он был немного больше. Когда мы заполним текст, мы увидим за ним тень разных цветов. Сохраняем. Давайте рассмотрим этот пример в IE. Вот вы видите, что у нас есть текст, а за ним идет тень. Вернемся в Firefox. То же самое, ок. Все работает. Посмотрим на пример в Chrome.

Все отлично работает. Вернемся в код и рассмотрим другой пример. Сейчас мы нарисуем линию. Копируем этот код и вставляем. В данном случае у нас есть линия, заканчивается она кругом, шириной в 25 пикселей. А теперь давайте снова поменяем некоторые свойства для тени, в данном случае мы сделаем цвет более фиолетовым с более высоким числом для Blur. strokeStyle устанавливаем на red.

Мы получаем красную линию с округлым окончанием шириной в 25 пикселей. Прописываем moveTo и lineTo, а затем вызываем функцию stroke. Тогда будет создана тень. Сохраняем. Обновляем IE. Линия на месте, и за ней находится такая немного фиолетовая тень. То же самое показано в Firefox. Да, все отлично работает. Переходим в Chrome. Тоже все прекрасно. Прежде чем мы двинемся дальше, давайте посмотрим, что мы можем сделать с тенями.

Сейчас я беру вот здесь и здесь shadowOffset, и я ставлю сюда отрицательные числа. Пишу -15 и -15, сохраняю. Возвращаемся в браузер и обновляем. Вы видите, что в данном случае тень перемещается за объектом вверх и влево. Итак, вы можете указать положительные числа, которые перемещают тень вправо по оси X и вниз по оси Y, а также можно указать отрицательные числа, тогда тень переместится вверх и влево.

Отрицательное число для X обозначает переход влево, а отрицательное число для Y обозначает переход вверх. В этом уроке мы рассмотрели, как рисовать тени разных цветов, с разными эффектами затемнения и разными сдвигами.