Как в канве сделать градиент цвета
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 71af02117ceb9b4c • Your IP : 82.102.23.104 • Performance & security by Cloudflare
Еще одно Canvas руководство [2]: Стилизация, градиенты, тени
В предыдущей части мы рассмотрели как работать с путями, но рисовать только черным цветом не в радость именно поэтому в этой части самым первым мы рассмотрим как разукрасить наш холст, затем рассмотрим как стилизовать линии, далее научимся работать с тенями, потом научимся работать с градиентами и напоследок разберемся как работать с так называемыми шаблонами.
Сделаем наш холст разноцветным
Как вы уже заметили в canvas есть два типа операции отрисовки fill и rect и у каждого есть свои настройки стилей. Для их изменения нужно менять свойства контекста fillStyle и strokeStyle, эти свойства в качестве значения могут принимать не только цвета, но и другие значения которые мы рассмотрим позже. А сейчас мы рассмотрим как поменять цвет. Для этого нужно просто присвоить свойствам fillStyle и strokeStyle новый значения, в случае с цветами это будут строки, при этом canvas поддерживает следующие схемы описания цветов: orange, #FFA500, rgb(255,165,0), rgba(255,165,0,1).
Для примера нарисуем разноцветный круг, оставим в нашем скрипте только получение контекста, а затем добавим следующий код:
Как внимательный читатель догадался, этот код нарисует круг состоящий из 6 сегментов с произвольными цветами.
Поработаем с линиями
Мы также можем изменить некоторые параметры у линий для этого существует несколько свойств, давайте рассмотрим по порядку каждое из них.
Изменяем ширину линии
Значение ширины линии хранится в свойстве lineWidth контекста canvas и одна единица соответствует одному пикселю. Значение по умолчанию естественно 1.0
Стиль верхушки линий
Стиль верхушки линии хранится в свойстве lineCap и для него существует три возможных значение: butt, round, sqare, стилем по умолчанию является butt.
Стиль соединения линий
Стиль соединения линий хранится в свойстве lineJoin и может принимать три возможных значение: miter, round, bevel, стилем по умолчанию является miter.
Еще немного о miter
Мы можем ограничить длину огромного хвоста miter с помощью свойства miteLimit которое по умолчанию принимает значение 10.
Отбросим тени
Если быть точным то тени canvas отбрасываются всегда, просто они отбрасываются с нулевым смещением и нулевым размытием. Долго рассматривать тени не стоит так как тут все предельно ясно, есть четыре свойства управляющие тенями (через знак равно указаны стандартные значения):
Для примера отбросим две тени на друг друга в ограниченной области рисования и посмотрим что произойдет:
Используем градиенты
Линейные градиенты
Создание объекта градиента
— создаст объект линейного градиента проходящего из точки (x1;y1) в точку (x2;y2), добавим в наш код строку:
Добавляем цвета в градиент
— добавит в наш градиент цвет color с отступом offset который принимает значения от 0 до 1.
Добавим в наш скрипт строки:
Применим градиент как стиль заливки
Свойство fillStyle контекста canvas может принимать в качестве значения не только цвет, но и градиент, добавим в скрипт строку:
Финальный шаг, рисуем залитый прямоугольник
Добавим в наш скрипт последнюю строку:
Радиальные градиенты
При работе с радиальными градиентами отличие от линейных заключается только в создании.
— создаст радиальный градиент с плавным переходом цвета из окружности с центром в точке (x1;y1) и радиусом r1 в окружность с центром точке (x2;y2) и радиусом r2. Для примера нарисуем шарик и сделаем псевдо-освещение:
Градиенты в canvas
Градиенты можно использовать для заполнения прямоугольников, кругов, линий, текста и т. д. Фигуры, которые можно рисовать в элементе <canvas>, не ограничены только однородными цветами.
Существует два метода для создания двух типов градиентов:
- createLinearGradient(x,y,x1,y1) — создает линейный градиент
- createRadialGradient(x,y,r,x1,y1,r1) — создает радиальный градиент
Как только у нас будет объект градиента, мы должны будем добавить две или больше цветовых остановки.
Метод addColorStop() задает цветовые остановки и их положение на шкале градиента. Положение на шкале градиента может быть любым в диапазоне от 0 до 1.
Чтобы применить градиент, передайте градиент в свойство fillStyle или strokeStyle, затем нарисуйте фигуру (прямоугольник, текст или линию).