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

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

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

Создавать градиенты, используя HTML5 canvas, довольно просто. Есть два вида градиентов:линейные и радиальные. Чтобы создать градиент, нужно пройти два этапа. Во-первых, при создании градиента нужно использовать соответствующую функцию, чтобы создать градиент нужного типа: линейный или радиальный. Как только вы создали градиент, нужно добавить в него цветовые остановки на определенных позициях, чтобы создать необходимые цветовые переходы. Как только градиент создан, он может быть использован так, как используется заполнение или окаймление, а также как и паттерны.

Давайте рассмотрим, как работают градиенты. Линейный градиент устанавливается наряду с контуром. Есть две точки, которые определяют линейный градиент. Линейный градиент затем путешествует от одной до второй точки. В этом примере у нас есть градиент, определенный начальной точкой x0, y0 и конечной точкой x1, y1. В данном случае голубой цвет путешествует по линии до нижней правой точки x1, y1. Радиальные градиенты работают немного по-другому.

Радиальные градиенты определяются двумя кругами. Радиальный градиент путешествует от края внутреннего круга до края внешнего круга. В данном случае внутренний круг у нас темно синего цвета, и градиент путешествует от края внутреннего круга ко внешнему. Чтобы создать градиенты, нужно использовать функции createLinearGradient или createRadialGradient. Функция createLinearGradient принимает четыре аргумента, две точки. Это первая точка. Это вторая точка, которую я показал ранее, а это линия, по которой путешествует градиент.

Функция createRadialGradient принимает шесть аргументов, которые определяют два круга. Центр первого круга находится в точке x0, y0, а его радиус - это r0. Центр второго круга находится в точке x1, y1, и его радиус - r1. Таким образом определяются два круга, и так путешествует градиент. Независимо от того, какой градиент вам нужен, вы используете функцию addColorStop, чтобы добавить цветовые остановки на разные позиции. Первый аргумент, position, это число с плавающей точкой от 0 до 1.0. Вы можете думать об этом, как о процентах.

Например, градиент на позиции 80%, это то же самое, что на 0.8. Вы можете добавить несколько цветовых остановок на разных позициях, и вы просто определяете цвет, используя стандартные CSS цвета. Давайте посмотрим на градиенты в действии. Вот я в коде. Это файл gradients_star из главы 06. Перехожу в раздел gradients файла snippets. Вот он. В первом примере мы создадим линейный градиент.

Копируем этот пример и вставляем его. Вот здесь у нас вызов createLinearGradient, и это первая точка. А это вторая точка. Обе эти точки начинаются в x 20 и идут от y 20 до y 280. Это будет прямолинейный градиент, а затем нам нужно добавить цветовые остановки. Мы переходим от красного к синему и от синего к зеленому. На позиции 0 мы начинаем с красного, на полпути переходим к синему, а на отметке в 100% переходим к зеленому.

Чтобы отобразить градиент, мы просто устанавливаем fillStyle контекста для линейного градиента, который мы создали, а затем мы заполняем прямоугольник градиентом. Сохраняем, а теперь давайте посмотрим на окончательный результат, и вы видите, что все работает. Линейный градиент идет от этой точки прямо к этой точке. Давайте посмотрим, что случится, если мы изменим эти две точки. Возвращаемся к коду, меняю эту точку на 220. Сейчас у меня x of 20, 20, а вторая точка 220, 280.

Сохраняем, возвращаемся в браузер и обновляем. Вы видите, что градиент идет от верхнего левого края к нижнему правому. Вот таков линейный градиент. А теперь давайте рассмотрим радиальный. Возвращаемся к snippets, мы копируем этот код, который создает радиальный градиент. Копируем, вставляем. Все верно, давайте посмотрим на код.

В этом примере мы создаем радиальный градиент, и это первый круг. Центр первого круга находится на 525, 150, а его радиус составляет 20 пикселей. Центр второго круга находится там же, что и первого, но у него больший радиус, в данном случае 100. Итак, у нас есть два круга с центром в одной точке, но с разными радиусами. Теперь нужно добавить в градиент несколько цветовых остановок. Переходив к addColorStop и делаем несколько вещей; мы делаем переход от красного к синему, а затем к зеленому. Красный будет на 0, синий на полпути, зеленый на позиции 100%.

Мы устанавливаем fillStyle на градиент, который мы создали. А затем мы создаем дугу, контекст которой является градиентом. После установки fillStyle вы можете заполнить ее градиентом. Сохраняем. Ок, возвращаемся в браузер и обновляем, и вы видите, что у нас есть круг с радиальным градиентом. Внутренний круг заполнен красным, и градиент путешествует от края этого круга к краю большего круга. Давайте вернемся к определению радиального градиента и немного сместим круг.

Вот мы в коде, и вместо x 525 и 150 давайте сделаем небольшое смещение. Давайте установим для y 100 x, допустим, 500. Тогда круг переместится немного вверх и влево. Сохраняем, возвращаемся в браузер, обновляем, и вы видите, что круг был здесь, а теперь он переместился сюда, теперь градиент немного сжат и вытянут.

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