Как в канве сделать градиент цвета
Перейти к содержимому

Как в канве сделать градиент цвета

  • автор:

Как добавить цвет градиента к тексту в Canva — Canva

Пусть вас не останавливает отсутствие в Canva эффекта градиентного текста.

Темы покрыты Показать

Градиенты могут создать отличный эффект в вашем дизайне. Если вы хотите тонко выделить текст — или не хотите — в своих проектах холста, вы можете использовать для этого эффект градиента. Вы не ошибетесь с цветовым охватом. Он естественным образом привлекает внимание к любому предмету, не делая его липким.

Вы можете использовать градиент двух разных цветов или двух оттенков одного цвета. Постепенное смешивание цвета с другим цветом в естественном градиенте настолько естественно, что не кажется странным. И независимо от того, какую комбинацию вы выберете, она произведет потрясающий эффект. Это также позволяет вам добавлять больше цветов к вашим дизайнам вместо использования одного цвета. Но если вы используете Canva, есть довольно очевидная проблема с добавлением градиента к тексту. Нет такого варианта!

Итак, почему мы продолжаем это делать? Потому что, как обычно, даже если нет очевидного способа сделать это, вы все равно можете это сделать. Вам просто нужна железная воля и немного свободного времени. И не волнуйтесь, это не займет много времени. Чуть больше, чем если бы был прямой выбор.

Любой желающий может использовать этот метод для создания градиентного текста, будь то бесплатные и профессиональные владельцы аккаунтов в Canva.

Единственная загвоздка!

В этом обходном пути есть одна функция, которая позволяет добавлять цвет градиента к тексту в Canva. У вас не может быть никаких вариантов шрифта с этим методом. Вы будете придерживаться одного и того же шрифта во всех выбранных вами дизайнах для градиентного текста. Но цветовая гамма будет их выделять, так что это не должно иметь большого значения.

Читайте также Узнайте о предоплаченных пакетах Mobily и наиболее важных кодах Mobily

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

Добавьте к тексту градиентный цвет

Перейти к canva.com и открыть определенный существующие или создать новый дизайн любого размера.

Затем перейдите на панель инструментов слева и выберите «Элементы» из опций.

Прокрутите список элементов вниз, пока не увидите «Фреймы», и нажмите «Просмотреть все», чтобы открыть все доступные параметры окна.

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

Если вы не знаете, что такое фреймы и как их использовать в Canva, ознакомьтесь с этим руководством: Как добавить фоторамку в Canva.

Выберите рамки для символов, содержащихся в тексте, и добавьте их все на страницу. Затем отрегулируйте размер и положение этих рамок, чтобы создать свою фразу. Однако не обязательно придерживаться размера текста. На этом этапе вы можете увеличить его, так как с ним будет легче работать, а позже уменьшите размер.

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

Выделите все символы, перетащив их курсором, и нажмите кнопку «Сгруппировать» на панели инструментов в верхней части редактора.

Читайте также Узнайте о преимуществах онлайн-чата

После сборки выкладывать слово в целом также будет проще. Вы можете перетащить его по странице или перейти к опции «Положение» и выбрать положение для текста.

Теперь перейдите к параметру элементов слева и найдите «градиенты» в элементах.

В Canva есть множество градиентных элементов разных цветов и стилей, которые вы можете использовать. Вы также можете настроить цвет градиента.

Выбрав градиент, поместите его на все рамки с буквами отдельно.

После того, как вы добавили градиенты к тексту, самое время внести небольшую корректировку, чтобы она действительно давала эффект градиента. Потому что в настоящее время не будет упоминания об эффекте когерентного градиента. Это просто набор цветов.

Настроить цветовой градиент

Хотя в Canva есть множество вариантов градиента, будут случаи, когда ни один из цветов не будет соответствовать вашему дизайну. Это не является проблемой. В Canva есть несколько градиентных изображений, которые вы можете настроить. Если вам нравится эффект градиента, вы можете просто изменить цвета на все, что вам нравится.

Начните новый дизайн с пустой страницы или добавьте новую пустую страницу к существующему дизайну.

Затем перейдите в «Элементы» и выберите цветовой градиент, который хотите настроить.

ملاحظة: Градиент можно настроить, только если параметр цвета отображается на панели инструментов в верхней части редактора. Если нет, выберите новый градиент или используйте его как есть.

Выберите градиент, чтобы панель инструментов с ее параметрами появилась в верхней части редактора. Если градиент можно настроить, перейдите в раздел «Цвет» на панели инструментов и щелкните цвет, который нужно изменить. Вы можете изменить все или некоторые цвета градиента.

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

После завершения настройки измените размер градиента так, чтобы он занимал всю страницу.

Теперь перейдите к кнопке загрузки и загрузите этот новый градиент как изображение на свой компьютер.

Если вы добавите новую страницу к существующему дизайну, вы сможете загрузить только эту страницу.

Затем перейдите к параметру «Загрузки» слева и нажмите «Загрузить мультимедиа».

Затем выберите «Устройство», чтобы загрузить только что сохраненный в Canva градиент.

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

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

Как сделать градиент в Canva

  • Chromebook
  • Mac
  • Windows
  • Устройство отсутствует?

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

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

Как создать градиентный фон

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

Процесс создания градиентного фона зависит от независимо от того, используете ли вы Canva на ПК или мобильном устройстве.

ПК

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

  1. Перейдите на главную страницу canva и войдите в свою учетную запись.
  2. Нажмите &ldquo ;Создать дизайн” Прокрутите вниз все варианты и выберите тот, который хотите применить.
  3. Выберите “Загрузки” в левой части панели управления редактором.
  4. Нажмите “Загрузить медиаданные” и загрузите изображение, которое хотите создать.
  5. После загрузки изображения нажмите “Elements” выше Загрузки.
  6. Введите “градиент” в поиск и нажмите клавишу Enter на клавиатуре.
  7. Навигация через параметры градиента Canva и выберите тот, который хотите применить.
  8. Применив градиент, перетащите его углы так, чтобы он заполнил соответствующую часть изображения.
  9. Нажмите на панель редактирования Imagine в правом верхнем углу и, если вы не видите панели, нажмите “••• Подробнее”.
  10. Уменьшите прозрачность, чтобы настроить сплошной цвет градиента.
  11. Выберите градиент и нажмите «Позиция». в правом верхнем меню.
  12. Установите градиент на столько столько раз, сколько необходимо, чтобы поместить его за любыми другими изображениями.
  13. Нажмите градиент, чтобы увидеть его цвета в правом верхнем углу окна Canva. Выберите предпочтительное сочетание цветов.
  14. Затем вы можете “Поделиться” ваш дизайн в правом верхнем углу.

Mobile

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

  1. Нажмите кнопку + в нижнем углу редактора изображений.
  2. Проведите пальцем, пока не дойдете до “Фон” значок и коснитесь его. Если вы не видите значок, проведите пальцем по экрану, чтобы найти “••• Подробнее” и вы должны найти “Фон” там.
  3. Выберите плитку цвета, расположенную под строкой поиска, и нажмите, чтобы применить.
  4. Проведите вниз по панели редактора, чтобы вернуться к дизайну.

Выполните следующие действия, если хотите выбрать другой цвет для градиентного фона.

  1. Нажмите “Палитра” icon.
  2. Выберите значок “+ Добавить новый цвет” option.
  3. Выберите новый цвет.

Как создать градиент на тексте

Добавление градиента к тексту позволяет он выделяется на плоском цветном фоне, создавая ощущение глубины, которое выделяет текст. Опять же, процесс зависит от того, используете ли вы ПК или мобильное приложение Canva.

ПК

Есть два способа создать градиентный текст на ПК. Первый — это обходной путь, который позволяет вам создать этот текст в бесплатной версии программного обеспечения. Второй использует некоторые платные функции для ускорения процесса.

Бесплатный метод

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

  1. Создайте новый дизайн.
  2. Нажмите кнопку “Элементы” на левой боковой панели.
  3. Найдите “Градиенты” и выберите бесплатный дизайн.
  4. Найдите два варианта цвета в верхнем левом углу и выберите нужные цвета.
  5. Сохраните и загрузите новый файл в формате PNG.

Теперь, когда у вас есть градиент, вы готовы использовать его для создания текстового эффекта.

  1. Открыть новую страницу.
  2. Выберите “Элементы”
  3. Введите текст и нажмите “Рамки для букв” option.
  4. Выберите нужную букву и перетащите ее в нужное место.
  5. Повторите этот процесс для каждой необходимой буквы.
  6. Найдите PNG-файл с градиентом и перетащите его в каждую букву.
  7. Дважды щелкните каждую букву и измените размер градиентного изображения, чтобы оно покрывало все края страницы.
  8. Выберите градиент и нажмите «Позиция». Назад в правом верхнем меню.

Платный метод

Платный метод использует Инструмент удаления фона Canva для ускорения процесса.

  1. Откройте новую страницу.
  2. Щелкните значок “Элементы” и добавьте градиент к фону.
  3. Выберите “Элементы&rdquo ; еще раз и нажмите “Прамки для писем”
  4. Перетащите выбранный буквы на страницу.
  5. Выберите все буквы и установите их прозрачность до 35%.
  6. Загрузите все изображение в формате PNG.
  7. Загрузите новый PNG в Canva.
  8. Нажмите “Добавить страницу”
  9. Перетащите новую страницу в загруженный файл PNG.
  10. Нажмите “Редактировать изображение” вверху блока.
  11. Выберите “Удаление фона” и подождите около пяти секунд.
  12. Нажмите “Применить&rdquo. ;

Теперь у вас должен быть градиентный текст без необходимости многократного перетаскивания PNG файл в каждое письмо.

Мобильный

Создать градиентный текст с помощью мобильного приложения Canva немного сложнее, чем с помощью ПК. Это также требует, чтобы вы сохранили несколько градиентных изображений на фотографиях вашего мобильного устройства. Начните с создания нового градиентного фона.

  1. Откройте панель инструментов Canva и нажмите значок + в правом нижнем углу экрана.
  2. Нажмите “Публикация в Facebook” шаблон.
  3. Снова нажмите значок + и перейдите к фотографиям.
  4. Найдите &ldquo ;Градиент.”
  5. Нажмите на нужное градиентное изображение.
  6. Перетащите края, чтобы градиентное изображение покрыло весь шаблон.

Теперь вам нужно добавить текст, к которому вы хотите применить градиент.

  1. Нажмите значок +.
  2. Выберите “Текст” значок. Если его не видно, нажмите “••• Подробнее” чтобы найти его.
  3. Выберите заголовок, подзаголовок или основной текст и выберите шрифт.
  4. Вставьте текст в изображение.
  5. Перетащите текст’ s, чтобы придать ему нужный размер.
  6. Нажмите на текстовое поле и введите нужные слова.

Теперь у вас есть градиент и шрифт. Теперь пришло время применить к тексту градиент.

  1. Измените цвет текста на белый.
  2. Выберите текстовое поле и с помощью ползунка прозрачности установите прозрачность текста на 40%.
  3. Загрузите изображение в виде файла PNG.
  4. Повторно войдите в Canva и проведите по экрану, чтобы открыть пустой шаблон.
  5. Нажмите значок +.
  6. Перейдите в “Загрузки” и выберите только что созданный файл PNG.
  7. Измените размер PNG, чтобы он заполнил шаблон.
  8. Выберите “Эффекты” в инструментах внизу экрана.
  9. Нажмите “ Удаление фона” и ждите.

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

  1. Обрежьте текст в изображении PNG.
  2. Выберите “Настроить” на панели инструментов.
  3. Используйте ползунки, чтобы настроить цвета в тексте.

Как создать Градиент в фигуре

Добавление градиента к фигуре работает аналогично добавлению градиента к тексту. Прежде чем применить его к фигуре, необходимо сначала создать градиентное изображение.

  1. Создать новый дизайн и пользовательский размер.
  2. Выберите “Элементы” icon.
  3. Найти “Градиенты” и выберите дизайн.
  4. Перетащите края градиента, чтобы закрыть всю вашу страницу.
  5. Выберите параметры цвета.
  6. Сохраните и загрузите изображение в формате PNG.

Далее необходимо создать фигуру, к которой можно применить сохраненное градиентное изображение.

  1. Откройте новый шаблон Canva.
  2. Перейдите к “Элементам&rdquo. ;
  3. Нажмите “Кадры” и выберите форму.
  4. Измените размер изображения по мере необходимости.
  5. Загрузите созданный файл PNG в новый шаблон и перетащите его на фигуру.
  6. Используйте закругленные углы изображения, чтобы настроить его размер.
  7. Дважды щелкните изображение и обрежьте его по форме.
  8. Нажмите “Готово” когда закончите.

Мобильный

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

  1. Откройте Canva и выберите значок +.
  2. Выберите пустой шаблон.
  3. Снова нажмите значок + и найдите свои фотографии.
  4. Найдите “Градиент”
  5. Выберите градиентное изображение для вставки в шаблон.
  6. Перетащите края изображения, чтобы оно заполнило шаблон.
  7. Сохраните шаблон в виде файла PNG.

Затем вы создадите фигуру и добавите в нее градиентное изображение.

  1. Откройте новый шаблон Canva.
  2. Нажмите значок +.
  3. Нажмите “Элементы”
  4. Прокрутите до “Кадры” и выберите желаемую форму.
  5. Нажмите на стрелку, чтобы увидеть все доступные фигуры.
  6. Нажмите на рамку и отрегулируйте ее размер с помощью значков со скругленными углами.
  7. Выберите кадр и нажмите значок +.
  8. Нажмите “Папки” и перейдите к сохраненному PNG-файлу.
  9. Перетащите загруженный PNG в середина кадра. Изображение автоматически обрежется по размеру рамки.

Градиенты для всех Случаи

Несмотря на то, что это требует дополнительной работы, с помощью Canva можно создавать градиенты в тексте и фигурах. Это позволяет создавать привлекательные изображения с большей глубиной и выразительностью.

Использовали ли вы раньше градиенты в Canva? Знаете ли вы, что можно использовать градиенты для фигур и текста, а также фона? Дайте нам знать в разделе комментариев ниже.

Градиент

Инструмент «Градиент» позволяет рисовать градиенты семи типов и во многих форматах. Цветовые градиенты отображаются как переход между Основным и Дополнительным цветами. Кроме этого, используя градиенты в режиме прозрачности, можно получить эффект «затухания» или «слияния» двух изображений в одно.

Типы Градиентов

Каждый из семи типов градиента можно выбирать на Панели инструментов.

Градиент

Рисование градиента

Чтобы нарисовать градиент, выберите инструмент Градиент, кликните на холсте и протяните указателем мыши. Градиент будет нарисован как переход между Основным и Дополнительным цветами (Цветового режима) при движении мыши.

После отпускания кнопки мыши градиент можно отрегулировать, перетащив Управляющие маркеры. Щелчок правой кнопкой мыши по маркеру сменит роли Основного и Дополнительного цветов, эффективно изменив направление градиента.

Цветовой режим

Тип градиента по умолчанию — это градиент цвета, который влияет на все цветовые каналы и альфа-канал. Градиент будет переходить от Основного цвета к Дополнительному. Если перетащить градиент Правой кнопкой мыши, то роли Основного и Дополнительного цветов будут поменяны местами.

Градиент

Режим прозрачности

Целенаправленно режим прозрачности обычно используется для создания постепенного «исчезновения» части изображения. Это может быть полезно для смешивания двух изображений вместе. Для перехода в этот режим, выберите его в Панели инструментов.

Градиент

Этот тип градиента влияет только на альфа-канал активного слоя. Градиент будет исчезать от альфа-значения Основного цвета до инверсии альфа-значения Дополнительного цвета. Следовательно, вполне возможен переход между двумя состояниями частичной прозрачности.

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

Пример применения Градиента

Для применения всех типов Градиента будем использовать следующее исходное изображение.

Градиент

Ниже приведены примеры воздействия каждого из 7 типов градиента на изображение. Слева показаны изображения после обработки градиентом в режиме Цвет с двумя непрозрачными цветами (и значением альфа 255). Справа показаны изображения после обработки градиентом в Режиме прозрачности.

Градиент Градиент Градиент Градиент Градиент Градиент Градиент

Смешивание изображений

Чтобы сделать затухание или смешивание, поместите два изображения на отдельные слои, а затем используйте прозрачный градиент любой формы на верхнем слое.

На нижеследующем примере вы можете увидеть плавный переход одного изображения в другое. Данный эффект можно легко создать «протянув» прозрачный градиент с левого до правого края изображения.

Градиент

Режимы повтора

Режимы повтора определяют действие градиента за пределами границ формы. Пользователю доступно 3 режима: Не повторять, Повторять и Отражать.

Градиент

Градиент

  1. Не повторять — градиентная градация не выходит за пределы ограничений, налагаемых управляющими маркерами.
  2. Повторять — градиент между управляющими маркерами повторяется во фрагментах такой же ширины, как и текущее расстояние между управляющими маркерами. Фрагменты отделены резкой гранью окончания одного градиента и началом следующего.
  3. Отражать — градиент зеркально отражен вдоль краев. Это приводит к повторяющемуся бесшовному паттерну.

Режимы смешивания

Градиенты можно создавать, используя опции режимов смешивания, выбранные на Панели инструментов из выпадающего меню.

Градиент

Градиент будет применен в соответствии с другими параметрами (Цвет/Прозрачность, Режим повторения и т.д.), а затем проинтерпретируется так, как если бы пиксели были на своем слое с установленным режимом смешивания слоев. На изображении ниже вы увидите наше исходное изображение и примененный к нему Линейный градиент в режиме Экранное осветление.

HTML5 Canvas — тени и градиентная заливка

До сих пор для рисования и заливки элементов на холсте мы использовали сплошные цвета. И хотя в этом определенно нет ничего предосудительного, артистические натуры будут рады узнать, что возможности холста не ограничиваются только сплошными цветами.

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

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

Создание теней

Одной из полезных возможностей холста является добавление теней позади любого нарисованного изображения. Тени можно применять с одинаковым успехом с фигурами, изображениями и текстом. Одной из интересных особенностей является взаимодействие теней с изображениями с прозрачным фоном. Тени также хорошо сочетаются с текстом, позволяя создавать разнообразные эффекты, управляемые установкой соответствующих параметров.

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

Свойства для управления внешним видом теней в элементе Canvas

Свойство Описание
shadowColor Устанавливает цвет тени. Можно установить черную или цветную тень, но обычно лучше всего делать ее полусерой. Другой хороший подход — использовать полупрозрачные тени, чтобы можно было видеть содержимое под ними. Отключить тени можно, присвоив атрибуту альфа свойства shadowColor нулевое значение
shadowBlur Устанавливает степень размытия теней. Нулевое значение этого свойства определяет четкую, резкую тень, выглядящую как силуэт исходного изображения. А значение 20 дает тень в виде размытой дымки, и можно установить еще большее значение. Большинство людей считает, что лучше всего выглядит слегка размытая тень (значение shadowBlur около 3)
shadowOffsetX и shadowOffsetY Определяют положение тени относительно содержимого, которому она принадлежит. Например, если присвоить каждому свойству значение 5, тень будет расположена на 5 пикселов вправо и 5 пикселов вниз от исходного содержимого. Отрицательные значения сдвигают тень в противоположном направлении — влево и вверх

Ниже показан пример использования теней:

// Определение контекста рисования canvas = document.getElementById("drawingCanvas"); context = canvas.getContext("2d"); // Рисуем прямоугольник с тенью context.rect(20, 20, 200, 100); context.fillStyle = "#8ED6FF"; context.shadowColor = "#bbbbbb"; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); // Рисуем три строчки текста с тенью context.textBaseline = "top"; context.font = "bold 20px Arial"; context.shadowBlur = 3; context.shadowOffsetX = 2; context.shadowOffsetY = 2; context.fillStyle = "steelblue"; context.fillText("Едва различимая, слегка старомодная тень.", 10, 175); context.shadowBlur = 5; context.shadowOffsetX = 20; context.shadowOffsetY = 20; context.fillStyle = "green"; context.fillText("Здесь используется \"далекая\" тень. ", 10, 225); context.shadowBlur = 15; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowColor = "black"; context.fillStyle = "white"; context.fillText("Эта тень не смещена от исходного изображения и создает эффект ореола.", 10, 300); // Рисуем звезду с тенью (загрузка из изображения) context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowColor = "#bbbbbb"; context.shadowBlur = 4; var img = new Image(); img.onload = function() < context.drawImage(img, 250, 30); >; img.src = "http://professorweb.ru/downloads/star.png";

Разные виды теней в элементе Canvas

Заполнение фигур изображениями

Нарисованные на холсте фигуры можно заполнять не только сплошными или полупрозрачными цветами, но также градиентными цветами или узорами. Такие вычурные стили, несомненно, сделают простые фигуры более привлекательными. Такого рода оформление выполняется в два этапа: сначала создается заполнение, которое потом связывается со свойством fillStyle (или иногда со свойством strokeStyle).

Заполнение узором осуществляется путем множественной вставки копий одного исходного изображения вплотную друг к другу. Изображение, используемое в качестве исходной плитки, нужно загрузить в объект изображения. Имея объект изображения, можно создать объект шаблона, используя метод контекста createPattern(). На этом этапе указывается направление копирования плитки — горизонтально (repeat-x), вертикально (repeat-y) или в обоих направлениях (repeat). Последний шаг — присвоить созданный объект шаблона свойству контекста fillStyle или strokeStyle.

Ниже показан пример:

var img = new Image(); img.onload = function() < context.drawImage(img, 250, 30); var pattern = context.createPattern(img, "repeat"); context.fillStyle = pattern; context.rect(0, 0, canvas.width, canvas.height); context.fill(); >; img.src = "http://professorweb.ru/downloads/brick_tile.gif";

Этот код создает прямоугольник, который заполняет холст исходным изображением:

Узоры на Canvas

Градиентная заливка в Canvas

Другим типом заполнения является градиентное, в котором смешиваются два или более цветов. Холст поддерживает линейные и радиальные градиенты. Первым шагом в создании градиентной заливки будет создание правильного типа объекта градиента. Для решения этой задачи контекст рисования предоставляет два метода: createLinearGradient() и createRadialGradient(). Оба метода работают более-менее похоже: они содержат список цветов, которые задействуются в разных точках.

Самый легкий способ разобраться с градиентами — это изучить простой пример. В качестве такого примера рассмотрим код для создания градиента в сердцеобразной фигуре:

// Создаем градиент от точки (10,0) до точки (100,0) var gradient = context.createLinearGradient(10, 0, 100, 0); // Добавляем два цвета gradient.addColorStop(0, "magenta"); gradient.addColorStop(1, "yellow"); // Вызываем функцию для рисования drawHeart(60, 50); // Рисуем фигуру context.fillStyle = gradient; context.fill(); context.stroke(); . // Вспомогательная функция для рисования фигуры в виде сердца function drawHeart(x, y)

Линейный градиент Canvas

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

Рассмотрим, например, линейный градиент, переходящий из светло-розового цвета в желтый. Этот переход можно выполнить в полосе шириной в несколько пикселов или же по всей ширине холста. Кроме этого, направление перехода может быть слева направо, сверху вниз или же с любым наклоном между этими двумя линиями. Все эти аспекты определяются линией градиента.

В данном примере линия градиента берет начало в точке (10, 0) и оканчивав в точке (100, 0). Эти точки предоставляют нам следующую важную информацию о данном градиенте:

  • Градиент горизонтальный . Это означает, что переход цветов происходит слева направо. Мы извлекаем эту информацию из того факта, что обе точки имеют одинаковую ординату. Если бы мы хотели выполнить переход сверху вниз, то можно было использовать, например, точки (0, 10) и (0, 100). А для перехода по диагонали сверху вниз слева направо можно было бы использовать, например, точки (10, 10) и (100, 100).
  • Собственно переход охватывает всего лишь 90 пикселов (начиная со значения абсциссы, равного 10, и заканчивая, когда это значение равно 100). В данном примере горизонтальный размер сердцевидной фигуры слегка меньше, чем размеры градиента, вследствие чего в фигуре видно большую часть градиента.
  • Цвета за пределами этого градиента становятся сплошными . Поэтому, если сделать фигуру шире, ее левый край будет окрашен чистым светло-розовым цветом, а правый — чистым желтым.

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

Остановка цветов градиента осуществляется вызовами метода градиента addColorStop(). При каждом вызове метода ему передается значение смещения от 0 до 1, которое определяет местонахождение цвета в переходе. Значение 0 означает, что цвет находится в самом начале градиента, а значение 1 размещает цвет в конце. Изменив эти числа (например, на 0.2 и 0.8), мы можем сжать градиент, показывая большую область сплошного цвета на каждом конце.

Для двухцветного градиента наиболее логичными значениями смещения являются 0 и 1. Но для градиентов с большим количеством цветов можно устанавливать разные смещения, чтобы сжать одни цветовые полосы и растянуть другие.

Процесс создания радиального градиента такой же, как и линейного, только вместо определения двух точек нужно определить два круга. Это потому, что переход градиентов в радиальном градиенте распространяется с меньшего круга к большему. Эти круги определяются указанием их центра и радиуса.

Ниже показан пример, расширяющий предыдущий. В нем добавлен линейный градиент с несколькими цветами, а так же двухцветные и многоцветные радиальные градиенты:

// Двухцветный линейный градиент var gradient = context.createLinearGradient(10, 0, 100, 0); gradient.addColorStop(0, "magenta"); gradient.addColorStop(1, "yellow"); drawHeart(60, 50); context.fillStyle = gradient; context.fill(); context.stroke(); // Двухцветный радиальный градиент gradient = context.createRadialGradient(180, 100, 10, 180, 100, 50); gradient.addColorStop(0, "magenta"); gradient.addColorStop(1, "yellow"); drawHeart(180, 100); context.fillStyle = gradient; context.fill(); context.stroke(); // Многоцветный линейный градиент gradient = context.createLinearGradient(10, 0, 100, 0); gradient.addColorStop("0","magenta"); gradient.addColorStop(".25","blue"); gradient.addColorStop(".50","green"); gradient.addColorStop(".75","yellow"); gradient.addColorStop("1.0","red"); drawHeart(80, 180); context.fillStyle = gradient; context.fill(); context.stroke(); // Многоцветный радиальный градиент gradient = context.createRadialGradient(180, 250, 10, 180, 250, 50); gradient.addColorStop("0","magenta"); gradient.addColorStop(".25","blue"); gradient.addColorStop(".50","green"); gradient.addColorStop(".75","yellow"); gradient.addColorStop("1.0","red"); drawHeart(180, 230); context.fillStyle = gradient; context.fill(); context.stroke();

Линейные и радиальные градиенты Canvas

В правой верхней фигуре примера радиального градиента цветовой переход распространяется от центральной точки фигуры с координатами (180, 100). Внутренний цвет ограничен кругом радиусом 10 пикселов, а внешний — кругом радиусом 50 пикселов. Опять же, если выйти за эти пределы, мы получим сплошные цвета — светло-розовый в центре и желтый по внешней окружности.

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

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