Как в канве поменять цвет фигуры

6

Как пользоваться Canva: популярные и неочевидные возможности

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

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

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

Нажмите на свой профиль → Account Settings → Выберите русский язык в меню Language.

Иллюстрации для соцсетей

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

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

Конструктор презентаций в Canva

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

Найдите шаблоны для презентаций через строку поиска — в новом окне откроется список макетов. В каждом — от 25 до 35 примеров слайдов в одном стиле, которые немного отличаются по структуре. На вкладке «Элементы-диаграммы» есть диаграммы и графики для слайдов, которым можно задавать нужные параметры.

Функции обработки изображений

Среди внутренних инструментов Canva чаще всего используют следующие.

Текст и фильтры

Откройте вкладку «Текст» на левой панели → Напишите текст → Подгоните размер, растянув или сжав текстовую рамку → Выберите шрифт и цвет на верхней панели.

Регулирование прозрачности

Кликните на объект, который хотите изменить → Нажмите на значок «Прозрачность» в верхнем правом углу → Настройте уровень прозрачности ползунком.

Изменение цвета элементов

Кликните на объект, который хотите изменить → Нажмите на значок цвета на верхней панели → Нажмите «+», чтобы создать свой цвет.

Редко используемые шаблоны

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

Готовые бланки. На них можно сделать дипломы, благодарственные письма, сертификаты. В эту группу шаблонов входит также фирменный бланк для компаний — корпоративный документ с логотипом и адресом в верхней части. Найти нужный бланк можно в строке поиска, например, по запросу «Сертификат» или «Фирменный бланк».

Рекламные материалы для распечатки — флаеры, листовки, буклеты, визитки. Искать эти шаблоны также можно в поиске: напишите «Буклет» или «Листовка» и посмотрите все доступные размеры.

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

Шаблоны для новостной рассылки. Найдите «Новостную рассылку» в поиске и выберите шаблон с подходящей структурой. Его можно редактировать: менять цвета, шрифты, фон, вставлять свои фотографии или снимки с фотостока Canva (вкладка «Фото»).

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

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

Найдите «Сайт» в строке поиска, выберите шаблон и редактируйте его — меняйте фон, изображения, логотипы, текст и другие элементы. Результат можно опубликовать как макет в формате PDF, PNG, JPG или как адаптивный сайт. Доступны два способа публикации адаптивных сайтов:

• Публикация дизайна в виде сайта. Дизайн откроется по ссылке и страницы можно будет прокручивать или просматривать как презентацию.
• Генерация HTML-кода. Код можно встроить в сайт или блог, и дизайн отобразиться на странице. Для этого нужно нажать на стрелку публикации в верхнем углу и выбрать вариант «Встроить».

команда сервиса canva

бесплатный курс

Первый шаг
в графическом дизайне

Узнать больше

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

Внутренние функции редактора, о которых знают немногие

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

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

Копирование настроек фотографий и цветов элементов с помощью быстрых сочетаний клавиш (alt+ctrl+C и alt+ctrl+V). Это позволит сохранить единый стиль среди нескольких дизайнов. Отредактируйте текст или изображение → Нажмите alt+ctrl+C → Выберите следующий элемент → Нажмите alt+ctrl+V → Настройки первого элемента скопируются на следующий.

Привязка аккаунта Canva к Facebook и Instagram с возможностью загружать фото прямо из соцсетей. Нажмите на вкладку «Еще» на панели слева → Выберите Instagram или Facebook → Введите данные, чтобы привязать страницы соцсетей.

Возможности сервиса в бесплатной и платной версии

Читать также

16 советов по созданию логотипа от экспертов по брендингу

Лучшие приёмы в минималистичном дизайне

Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Прямоугольники и другие фигуры в Canvas

Перед тем, как рисовать фигуры в Canvas, нужно создать холст и установить для него контекст. О том, как это делать, рассказывалось в предыдущей теме. А здесь я просто напишу код:

Установка цвета

Все фигуры в Canvas делятся на два типа:

1. Закрашенные фигуры
2. Линии

Для каждого типа цвет устанавливается отдельно. Когда Вы выбрали цвет для какого-то типа, то все фигуры этого типа будут создаваться с таким цветом. Пока Вы не установите другой цвет. Свойство fillStyle содержит цвет для закрашенных фигур, а strokeStyle для линий. Цвет устанавливается любым из способов, существующих в CSS. В том числе, можно использовать систему RGBA и создать прозрачный цвет. Только не забывайте, что значениями этих свойств являются строки. Установим цвет для фигур:

Прямоугольники в Canvas

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

Метод fillRect() рисует закрашенный прямоугольник.

fillRect (X, Y, ширина, высота)

X — координата X левого края прямоугольника

Y — координата Y верхнего края прямоугольника

ширина — ширина прямоугольника

высота — высота прямоугольника

Метод strokeRect() добавляет в Canvas прямоугольник в виде линий. Параметры такие же. Для примера нарисуем прямоугольник во весь холст, чтобы были видны его размеры. И добавим ещё один прямоугольник. Фигуры будут иметь цвета, которые мы установили ранее.

Должна получиться такая картинка:

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

Контуры

Остальные фигуры в Canvas рисуются с помощью контуров. Это делается так:

1. Вызываем метод beginPath() , который создаёт новый контур.
2. С помощью различных методов контекста рисуем сам контур.
3. Если нужно замкнуть контур, то есть, соединить начальную и конечную точку, то используем метод closePath() . Это может потребоваться только для линий. А у замкнутых фигур контур всегда замыкается, даже если это не сделать.
4. Вызываем один из методов — либо stroke() , либо fill() , которые рисуют фигуру по контуру. stroke() рисует линию, а fill() заполняет контур.

Контур не отображается на рисунке. Он становится виден, когда по нему нарисована фигура.

Метод lineTo() рисует прямую линию от текущей точки до указанной точки.

Указанная точка становится текущей. От неё можно нарисовать ещё одну прямую. И таким образом можно создать сложную линию. Если нужно её прервать и начать новую линию, то используется метод moveTo() , который задаёт новую текущую точку. Все линии остаются частью одного контура. При создании нового контура нужно использовать метод moveTo() для указания начальной точки, от которой начинается контур.

Добавим на рисунок линии:

Результат получится такой:

Замыкать контур не требовалось, поэтому метод closePath() не использован.

Теперь нарисуем закрашенный треугольник.

Должно выглядеть так:

Обратите внимание, нарисовано только две линии. Третья появилась при замыкании контура. Мы ничего не делали для этого. Контур замыкается при заливке.

Стиль линий

Есть несколько свойств, определяющих стиль линий. Значения этих свойств нужно указывать до того, как линия нарисована. То есть, до метода stroke() . Ширину линий устанавливает свойство lineWidth Значением является число, указывающее ширину в пикселях. Пример:

Ширину менее 2 пикселей не всегда возможно сделать. Вместо уменьшения ширины линия может становиться прозрачной. Особенно это проявляется на горизонтальных и вертикальных линиях. Для дуги ширина 1 пиксель выглядит нормально. Можно указывать дробные значения.

Свойство lineCap определяет внешний вид краёв линий. Может иметь значения:

butt — плоские (по умолчанию)

Укажем это свойство при рисовании широкой линии:

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

Свойство lineJoin устанавливает внешний вид угла между двумя линиями. Значения:

miter — острый (по умолчанию)

В этой теме уже рассматривалось рисование прямоугольников. Существует ещё метод rect() , который также добавляет прямоугольник в Canvas. Его отличие в том, что он создаёт контур, по которому далее нужно нарисовать фигуру.

Метод arc() рисует дугу определённого радиуса. В том числе, она может нарисовать круг.

arc (X, Y, радиус, начальный угол, конечный угол, направление)

X — координата X центра

Y — координата Y центра

радиус — радиус в пикселях

начальный угол — угол в радианах, от которого начинается дуга Отсчёт производится от самой правой точки окружности

конечный угол — угол в радианах, до которого доходит дуга

направление — направление дуги. false — по часовой стрелке, true — против часовой. По умолчанию установлено false

Начальный и конечный углы указываются так:

Число пи в JavaScript можно получить с помощью свойства Math.PI .

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

Добавим на рисунок окружность.

Не обязательно для каждой дуги создавать свой контур. Внутри одного контура можно создать несколько дуг и несколько прямых линий. А потом применить метод arc() и нарисовать по контуру линии. Только цвет и стиль линий будет одинаковый. То же относится и к закрашенным фигурам.

Нарисуем закрашенную фигуру в виде половины круга:

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

Метод arcTo() рисует дугу по двум касательным окружности. Касательные формируются по предыдущей точке контура и двум контрольным точкам

arcTo (X1, Y1, X2, Y2, радиус)

X1 — координата X первой контрольной точки

Y1 — координата Y первой контрольной точки

X2 — координата X второй контрольной точки

Y2 — координата Y второй контрольной точки

радиус — радиус дуги

Касательные для дуги определяются так:

Первая касательная проводится через предыдущую точку контура и контрольную точку 1. Предыдущая точка контура — это точка, до которой дошло рисование контура перед созданием дуги. Если контур начинается с дуги, то перед этим нужно использовать метод moveTo() и таким образом создать предыдущую точку.

Вторая касательная проводится через контрольную точку 1 и контрольную точку 2.

По этим двум касательным проходит дуга. Пример:

Кривые Безье

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

Метод quadraticCurveTo() рисует квадратичную кривую Безье. «Квадратичная» означает, что она рисуется по трём точкам. Первая — это предыдущая точка контура. И ещё две точки указываются в параметрах. Если предыдущей точки контура нет, её нужно создать с помощью метода MoveTo() .

quadraticCurveTo (X2, Y2, X3, Y3)

X2 — координата X второй базовой точки

Y2 — координата Y второй базовой точки

X3 — координата X третьей базовой точки

Y3 — координата Y третьей базовой точки

Метод bezierCurveTo() рисует кубическую кривую Безье. Она создаётся по четырём точкам. Первой точкой также является предыдущая точка контура. Соответственно, в параметрах указывается три точки. Пример:

Применение стилей и цветов

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

Цвета

До сих пор мы видели только методы рисования контекста. Если мы хотим применить цвета к фигуре, то есть два важных свойства, которые мы можем использовать: fillStyle и strokeStyle .

Устанавливает стиль для фона фигур.

Устанавливает стиль контура фигуры.

color может быть цветом, (строка, представленная в CSS <color> ), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура — чёрный (значение CSS цвета #000000 ).

Примечание: Когда вы устанавливаете значения strokeStyle и/или fillStyle , то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в fillStyle или в strokeStyle для каждой фигуры.

Чтобы строка color считалась валидной, она должна соответствовать CSS <color> . Далее приведены примеры того, как можно по-разному задать один и тот же цвет.

Пример fillStyle

В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

Результат выглядит так:

Пример strokeStyle

Этот пример похож на предыдущий, но мы используем свойство strokeStyle чтобы изменить цвета очертаний фигур. Так же мы используем метод arc() для рисования окружностей вместо квадратов.

Результат выглядит так:

Прозрачность

В дополнении к рисованию непрозрачных фигур, мы также можем рисовать прозрачные (полупрозрачные) фигуры. Это делается через установку свойства globalAlpha или задачи полупрозрачного цвета фона или контура.

Для применения, указывается значения прозрачности для всех будущих фигур, что будут нарисованы на canvas. Значение полупрозрачности могут быть между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность). Значение 1.0 (полная непрозрачность) установлено по умолчанию.

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

Так как свойства strokeStyle и fillStyle принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение для назначения прозрачных цветов.

Функция rgba() похожа на функцию rgb() , но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапазон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).

Пример globalAlpha

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

Пример использования rgba()

В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование rgba() добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.

Стили линий

Есть несколько свойств, которые позволяют нам стилизовать линии.

Устанавливает ширину линий, рисуемых в будущем.

Устанавливает внешний вид концов линий.

Устанавливает внешний вид «углов», где встречаются линии.

Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.

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

Устанавливает текущий пунктир линии.

Указывает, где следует начинать тире массива в строке.

Вы лучше поймёте, что они делают, глядя на приведённые ниже примеры.

Пример lineWidth

Это свойство задаёт толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.

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

В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу — 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.

Получение чётких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь чёткие края.

Если вы рассмотрите путь от (3, 1) до (3, 5) с толщиной строки 1.0 , вы получите ситуацию во втором изображении. Фактическая заполняемая область, (синяя), распространяется только наполовину в пикселях по обе стороны пути. Приблизительно это означает, что частично затенённые пиксели приводят к заполнению всей области (светло-голубой и синей) цветом, только наполовину темным, чем фактический цвет штриха. Это то, что происходит с линией шириной 1.0 в предыдущем примере кода.

Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной 1.0 занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении — ширина линии 1.0 закончится верно, точно заполняя вертикальную линию с одним пикселем.

Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки — иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля lineCap , значение по умолчанию — butt ; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечётной шириной, установив стиль lineCap в square , чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).

Также обратите внимание, что затронуты только начальные и конечные точки пути: если путь закрыт с помощью closePath() , — нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикреплённому предыдущему и следующему сегментам и при текущей настройке стиля lineJoin в значении по умолчанию — miter , с эффектом автоматического расширения внешних границ подключённых сегментов до их точки пересечения — обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.

Для линий с чётной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) — (3,5)), вместо середины пикселей.

Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет чёткой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.

Пример lineCap

Свойство lineCap определяет, как выводятся конечные точки каждой строки. Для этого свойства есть три возможных значения: butt , round и square . По умолчанию для этого свойства установлено значение butt .

Концы линий соответствуют крайним точкам.

Концы линий округлены.

Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.

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

Строка слева использует butt опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант — round опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует square опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.

Пример lineJoin

Свойство lineJoin определяет, как соединяются два сегмента (линий, дуг или кривых) с ненулевой длиной в форме (вырожденные сегменты с нулевой длиной, заданные конечные точки и контрольные точки находятся точно в том же положении — пропущены).

Для этого свойства есть три возможных значения: round , bevel и miter . По умолчанию для этого свойства установлено значение miter . Обратите внимание, что настройка lineJoin не действует, если два связанных сегмента имеют одно и то же направление, потому что в этом случае не будет добавлена область соединения.

Радиус заполняемой части для скруглённых углов равен половине ширины линии. центр этого радиуса совпадает с концами подключённых сегментов.

Заполняет дополнительную треугольную область между общей конечной точкой подключённых сегментов и отдельными внешними прямоугольными углами каждого сегмента.

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

В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств lineJoin ; результат — выше.

Демонстрация свойства miterLimit

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

Свойство miterLimit определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства miterLimit (значение по умолчанию 10,0 в HTML <canvas> ), поэтому miterLimit может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму рёбер линии.

Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединённых краёв линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краёв к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:

• miterLimit = max miterLength / lineWidth = 1 / sin ( minθ / 2 )
• Предел митры по умолчанию, равный 10,0, разделит все митры углов, острее примерно 11 градусов.
• Предел митры, равный √2 ≈ 1.4142136 (rounded up) сгладит миты для всех острых углов, поддерживая митры только для тупых или прямых углов.
• Предел митры, равный 1,0, действителен, но отключит все миты.
• Значения ниже 1.0 являются недопустимыми для предела митры.

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

Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

Использование штрихов

Метод setLineDash и свойство lineDashOffset задают шаблон штрихов для линий. Метод setLineDash принимает список чисел, который определяет расстояния для попеременного рисования линии и разрыва, а свойство lineDashOffset устанавливает смещение, с которого начинается шаблон.

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

Градиенты

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a CanvasGradient object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

Creates a linear gradient object with a starting point of ( x1 , y1 ) and an end point of ( x2 , y2 ).

Creates a radial gradient. The parameters represent two circles, one with its center at ( x1 , y1 ) and a radius of r1 , and the other with its center at ( x2 , y2 ) with a radius of r2 .

Once we’ve created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS <color> , indicating the color the gradient should reach at that offset into the transition.

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

Пример createLinearGradient

In this example, we’ll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn’t matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won’t be a problem.

In the second gradient, we didn’t assign the starting color (at position 0.0) since it wasn’t strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

Пример createRadialGradient

In this example, we’ll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the «classic» radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

In this case, we’ve offset the starting point slightly from the end point to achieve a spherical 3D effect. It’s best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn’t very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1) .

Шаблоны

В одном из предыдущих примеров мы использовали несколько циклов, чтобы создать шаблон из повторяющихся изображений. Однако, есть более простой способ сделать подобное — метод createPattern() .

Создаёт и возвращает новый canvas объект — шаблон (pattern). image — CanvasImageSource (en-US) (то есть HTMLImageElement , другой холст, элемент <video> или подобный объект. type — строка, указывающая, как использовать image .

Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:

Повторяет изображение в вертикальном и горизонтальном направлениях.

Повторяет изображение по горизонтали, но не по вертикали.

Повторяет изображение по вертикали, но не по горизонтали.

Не повторяет изображение. Используется только один раз.

Мы используем этот метод, чтобы создать CanvasPattern объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства fillStyle или strokeStyle . Например:

Примечание: По аналогии с методом drawImage() , вы должны убедиться, что изображение, которое вы используете, загружено до вызова этого метода. Иначе шаблон может быть отрисован некорректно.

Пример createPattern

In this last example, we’ll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image’s onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

Using shadows involves just four properties:

Indicates the horizontal distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.

Indicates the vertical distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.

Indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren’t affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

The shadowBlur property indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

Примечание: Shadows are only drawn for source-over compositing operations.

Пример текста с тенью

This example draws a text string with a shadowing effect.

We will look at the font property and fillText method in the next chapter about drawing text.

Canvas fill rules

When using fill (or clip (en-US) and isPointinPath (en-US)) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersetcs itself or is nested.

Как в канве поменять цвет фигуры

Еще одно 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, нужно создать холст и установить для него контекст. О том, как это делать, рассказывалось в предыдущей теме. А здесь я просто напишу код:

Установка цвета

Все фигуры в Canvas делятся на два типа:

1. Закрашенные фигуры
2. Линии

Для каждого типа цвет устанавливается отдельно. Когда Вы выбрали цвет для какого-то типа, то все фигуры этого типа будут создаваться с таким цветом. Пока Вы не установите другой цвет. Свойство fillStyle содержит цвет для закрашенных фигур, а strokeStyle для линий. Цвет устанавливается любым из способов, существующих в CSS. В том числе, можно использовать систему RGBA и создать прозрачный цвет. Только не забывайте, что значениями этих свойств являются строки. Установим цвет для фигур:

Прямоугольники в Canvas

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

Метод fillRect() рисует закрашенный прямоугольник.

fillRect (X, Y, ширина, высота)

X — координата X левого края прямоугольника

Y — координата Y верхнего края прямоугольника

ширина — ширина прямоугольника

высота — высота прямоугольника

Метод strokeRect() добавляет в Canvas прямоугольник в виде линий. Параметры такие же. Для примера нарисуем прямоугольник во весь холст, чтобы были видны его размеры. И добавим ещё один прямоугольник. Фигуры будут иметь цвета, которые мы установили ранее.

Должна получиться такая картинка:

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

Контуры

Остальные фигуры в Canvas рисуются с помощью контуров. Это делается так:

1. Вызываем метод beginPath() , который создаёт новый контур.
2. С помощью различных методов контекста рисуем сам контур.
3. Если нужно замкнуть контур, то есть, соединить начальную и конечную точку, то используем метод closePath() . Это может потребоваться только для линий. А у замкнутых фигур контур всегда замыкается, даже если это не сделать.
4. Вызываем один из методов — либо stroke() , либо fill() , которые рисуют фигуру по контуру. stroke() рисует линию, а fill() заполняет контур.

Контур не отображается на рисунке. Он становится виден, когда по нему нарисована фигура.

Метод lineTo() рисует прямую линию от текущей точки до указанной точки.

Указанная точка становится текущей. От неё можно нарисовать ещё одну прямую. И таким образом можно создать сложную линию. Если нужно её прервать и начать новую линию, то используется метод moveTo() , который задаёт новую текущую точку. Все линии остаются частью одного контура. При создании нового контура нужно использовать метод moveTo() для указания начальной точки, от которой начинается контур.

Добавим на рисунок линии:

Результат получится такой:

Замыкать контур не требовалось, поэтому метод closePath() не использован.

Теперь нарисуем закрашенный треугольник.

Должно выглядеть так:

Обратите внимание, нарисовано только две линии. Третья появилась при замыкании контура. Мы ничего не делали для этого. Контур замыкается при заливке.

Стиль линий

Есть несколько свойств, определяуюих стиль линий. Значения этих свойств нужно указывать до того, как линия нарисована. То есть, до метода stroke() . Ширину линий устанавливает свойство lineWidth Значением является число, указывающее ширину в пикселях. Пример:

Ширину менее 2 пикселей не всегда возможно сделать. Вместо уменьшения ширины линия может становиться прозрачной. Особенно это проявляется на горизонтальных и вертикальных линиях. Для дуги ширина 1 пиксель выглядит нормально. Можно указывать дробные значения.

Свойство lineCap определяет внешний вид краёв линий. Может иметь значения:

butt — плоские (по умолчанию)

Укажем это свойство при рисовании широкой линии:

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

Свойство lineJoin устанавливает внешний вид угла между двумя линиями. Значения:

miter — острый (по умолчанию)

В этой теме уже рассматривалось рисование прямоугольников. Существует ещё метод rect() , который также добавляет прямоугольник в Canvas. Его отличие в том, что он создаёт контур, по которому далее нужно нарисовать фигуру.

Метод arc() рисует дугу определённого радиуса. В том числе, она может нарисовать круг.

arc (X, Y, радиус, начальный угол, конечный угол, направление)

X — координата X центра

Y — координата Y центра

радиус — радиус в пикселях

начальный угол — угол в радианах, от которого начинается дуга Отсчёт производится от самой правой точки окружности

конечный угол — угол в радианах, до которого доходит дуга

направление — направление дуги. false — по часовой стрелке, true — против часовой. По умолчанию установлено false

Начальный и конечный углы указываются так:

Число пи в JavaScript можно получить с помощью свойства Math.PI .

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

Добавим на рисунок окружность.

Не обязательно для каждой дуги создавать свой контур. Внутри одного контура можно создать несколько дуг и несколько прямых линий. А потом применить метод arc() и нарисовать по контуру линии. Только цвет и стиль линий будет одинаковый. То же относится и к закрашенным фигурам.

Нарисуем закрашенную фигуру в виде половины круга:

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

Метод arcTo() рисует дугу по двум касательным окружности. Касательные формируются по предыдущей точке контура и двум контрольным точкам

arcTo (X1, Y1, X2, Y2, радиус)

X1 — координата X первой контрольной точки

Y1 — координата Y первой контрольной точки

X2 — координата X второй контрольной точки

Y2 — координата Y второй контрольной точки

радиус — радиус дуги

Касательные для дуги определяются так:

Первая касательная проводится через предыдущую точку контура и контрольную точку 1. Предыдущая точка контура — это точка, до которой дошло рисование контура перед созданием дуги. Если контур начинается с дуги, то перед этим нужно использовать метод moveTo() и таким образом создать предыдущую точку.

Вторая касательная проводится через контрольную точку 1 и контрольную точку 2.

По этим двум касательным проходит дуга. Пример:

Кривые Безье

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

Метод quadraticCurveTo() рисует квадратичную кривую Безье. «Квадратичная» означает, что она рисуется по трём точкам. Первая — это предыдущая точка контура. И ещё две точки указываются в параметрах. Если предыдущей точки контура нет, её нужно создать с помощью метода MoveTo() .

quadraticCurveTo (X2, Y2, X3, Y3)

X2 — координата X второй базовой точки

Y2 — координата Y второй базовой точки

X3 — координата X третьей базовой точки

Y3 — координата Y третьей базовой точки

Метод bezierCurveTo() рисует кубическую кривую Безье. Она создаётся по четырём точкам. Первой точкой также является предыдущая точка контура. Соответственно, в параметрах указывается три точки. Пример:

HTML5: Canvas. Основы

Canvas — это новый элемент HTML5, который предназначен для создания растрового изображения при помощи JavaScript. Само слово canvas переводится как холст или канва. Текст внутри тега будет проигнорирован браузером с поддержкой canvas и показан в браузере без поддержки canvas.

У тега есть два атрибута — height (высота) и width (ширина). Если размеры не указать, то по умолчанию размер холста будет равен 150х300 пикселей. Canvas создает область фиксированного размера, содержимым которого управляют контексты. Атрибуты не имеют отношения к CSS, они обозначают ширину и высоту canvas в пикселях не на экране, а на координатной плоскости холста.

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

Также требуется установить обязательный идентификатор для обращению к элементу в JavaScript.

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

Сейчас все современные браузеры поддерживают canvas. Если такой уверенности нет, то можно устроить небольшую проверку.

Мы находим элемент canvas по идентификатору, а затем вызываем метод getContext() с единственным параметром — строкой 2d. Если getContext() возвращает ответ, мы получаем 2D-контекст холста для добавления объектов.

Размер холста можно вычислить программно через свойства canvas.width и canvas.height.

Первый пример

Если открыть созданный пример браузером, то увидим область с чёрным прямоугольником. Это и есть тот самый холст, на котором нарисован прямоугольник, размеры которого равны размерам элемента canvas. Если бы мы не рисовали чёрный прямоугольник, то у нас был бы прозрачный холст. Размеры задаются в пикселях, а отсчёт идёт от верхнего левого угла. На холсте можно рисовать различные фигуры. Можно указать отрицательные значения для координат, ошибки не произойдёт, но смысла в этом нет — фигуры не будут видны на экране.

Настройки цвета и размера

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

За заливку отвечает свойство fillStyle. По умолчанию для заливки используется чёрный цвет. За цвет и стиль обводки отвечает свойство strokeStyle.

Цвет задается точно так же как и в CSS (четыре способа)

Есть ещё редко используемый способ через HSL — hsl(219, 58%, 93%).

Установим желаемые настройки — укажем, что мы хотим красный цвет (#FF0000) и толщину в 3 пиксела для обводки и зеленый цвет (#00FF00) для заливки:

Прямоугольники

• strokeRect(x, y, ширина, высота) — рисует границы прямоугольника
• fillRect(x, y, ширина, высота) — рисует закрашенный прямоугольник
• clearRect(x, y, ширина, высота) — Очищает область на холсте размер с прямоугольника заданного размера в указанной позиции

Функция clearRect() как бы вырезает кусок фигуры, за которым можно увидеть холст.

Нарисуем два вида прямоугольников.

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

Каждая добавляемая фигура размещается на отдельном уровне; следующий фрагмент кода создаёт три прямоугольника со смещением в 15 пикселей, чтобы они частично наложились друг на друга.

Рисуем шахматную доску

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

Раскрашиваем шахматную доску

Линии и дуги

Мы можем рисовать прямые и изогнутые линии, окружности и другие фигуры. Замкнутые линии можно заливать цветом. В отличии от рисования прямоугольников, рисование линий это не одна команда, а их последовательность. Так, сначала надо объявить начало новой линии с помощью beginPath(), а в конце сказать от том, что рисование линии заканчивается с помощью closePath(). У каждого отрезка линии есть начало и конец.

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

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

Завершающий шаг — это вызов методов stroke или fill. stroke обводит фигуру линиями, а fill заливает фигуру сплошным цветом.

Также существуют такие методы как,

• moveTo(x, y) — перемещает «курсор» в позицию x, y и делает её текущей
• lineTo(x, y) — ведёт линию из текущей позиции в указанную, и делает в последствии указанную текущей
• arc(x, y, radius, startAngle, endAngle, anticlockwise) — рисование дуги, где x и y центр окружности, далее начальный и конечный угол, последний параметр указывает направление

Давайте нарисуем ломаную, состоящую из двух отрезков:

Если набор отрезков будет замкнут, то у нас получится полигон, который можно залить цветом. Создадим и зальём треугольник с помощью функции fill().

Изменяем ширину линии

Значение ширины линии хранится в свойстве lineWidth контекста canvas и одна единица соответствует одному пикселю. Значение по умолчанию естественно 1.0

Стиль верхушки линий

Стиль верхушки линии хранится в свойстве lineCap и для него существуют три возможных значения:

• butt (по умолчанию)
• round
• sqare

Стиль соединения линий

Стиль соединения линий хранится в свойстве lineJoin и может принимать три возможных значения:

• miter (по умолчанию)
• round
• bevel

Мы можем ограничить длину огромного хвоста miter с помощью свойства miteLimit, которое по умолчанию принимает значение 10.

Рисуем корону

Окружности

Окружности рисуются с помощью команды arc(ox, oy, radius, startAngle, endAngle, antiClockWise), где ox и oy — координаты центра, radius — радиус окружности, startAngle и endAngle — начальный и конечный углы (в радианах) для отрисовки окружности, а antiClockWise — направление движения при отрисовке (true для против часовой стрелке, false — против). С помощью arc() можно рисовать как круги и окружности, так и дуги и части окружности.

Окружность с радиусом в 100 пикселей:

Нарисуем разноцветный круг:

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

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

Теперь нарисуем круги из этих же фигур.

Частичная заливка окружности

Нарисуем частично залитую окружность.

Частично залитая окружность

Много кругов

Нарисуем круги в случайном порядке.

круги в случайном порядке

Закруглённые углы

Закруглённые углы рисуются при помощи функции arcto(), который содержит пять параметров.

• xBeginning — координата X начала дуги
• yBeginning — координата Y начала дуги
• xEnd — координата X конца дуги
• yEnd — координата Y конца дуги
• Radius — радиус дуги

Кривые Безье

Имеются две функции, для построения кубической и квадратичной кривой Безье:

quadraticCurveTo(Px, Py, x, y)
bezierCurveTo(P1x, P1y, P2x, P2y, x, y)

x и y — это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки, которые используются для построения кривой. В кубической кривой соответственно две дополнительные точки.

Рисуем кривые Безье

Раскрашиваем кривые Безье

Это точка на фигуре?

Функция isPointInPath(float x, float y) вернёт значение true, если точка с переданными координатами находится внутри пути. Создадим путь в виде прямоугольника и проверим:

Данный скрипт должен вывести в отладочную консоль сначала true, а затем false.

Функция clip() — ограничиваем область рисования

Функция clip() ничего не рисует. После её вызова любой объект будет рисоваться только в том случае, когда он находится в области на которой определён путь. Нарисуем круг и ограничим область рисования этим кругом. Затем нарисуем две линии, которые будут видны только внутри круга:

Если закомментировать вызов функции clip(), то увидим, как на самом деле рисуются линии.

Тени canvas отбрасываются всегда, просто они отбрасываются с нулевым смещением и нулевым размытием. Есть четыре свойства управляющие тенями (через знак равно указаны стандартные значения):

• shadowOffsetX = 0.0
• shadowOffsetY = 0.0
• shadowBlur = 0.0
• shadowColor = «transparent black»

Возьмем предыдущий пример и посмотрим на тени

Пример с прямоугольниками.

Градиенты

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

Сначала создаётся объект градиента при помощи функции createLinearGradient(float x1, float y1, float x2, float y2) из точки (x1; y1) в точку (x2; y2). Затем добавляются цвета при помощи функции addColorStop(float offset, string color), где offset — отступ со значениями от 0 до 1, а color — нужный цвет. Далее созданный градиент применяется как стиль заливки в свойстве fillStyle.

Радиальные градиенты

Радиальный градиент создаётся с помощью функции createRadialGradient(float x1, float y1, float r1, float x2, float y2, float r2) — плавный переход цвета из окружности с центром в точке (x1; y1) и радиусом r1 в окружность с центром точке (x2; y2) и радиусом r2.

Нарисуем шар с псевдо-освещением

Прозрачность

Прозрачность задаётся через атрибут globalAlpha. Значения находятся в диапазоне от 0 до 1, где 0 — полная прозрачность, 1 — сплошной цвет.

Также прозрачность можно задать в атрибутах цвета:

Используем шаблоны

Кроме цветов и градиентов fillStyle и strokeStyle в качестве значения могут принимать и так называемые шаблоны. Шаблоны можно создать из того же самого canvas элемента, изображения или видео. Для примера будем использовать изображение. Шаблон создается методом createPattern(object any, string repeat), где repeat может принимать следующие значения:«repeat» (по умолчанию),«repeat-x»,«repeat-y»,«no-repeat».

Треугольник Серпинского

Рисование изображений

Чтобы нарисовать изображение, нужно создать его объект с помощью конструктора Image, затем установить путь к изображению через свойство src полученного объекта.

Прежде чем рисовать изображение, его стоит загрузить. Для этого добавим обработчик события load для объекта img, добавим его после создания объекта.

Далее можно нарисовать изображение исходного размера с помощью функции drawImage(object img, float x, float y), где указывается его верхний левый угол в точке (x;y).

Для масштабирования используется другая версия функции — drawImage(object img, float x, float y, float w, float h) — в последних двух параметрах указывается ширина и высота.

Также можно обрезать картинку через ещё одну версию функции drawImage(object img, float sx, float sy, float sw, float sh, float cx, float cy, float cw, float ch) — нарисует часть изображения шириной sw и высотой sh расположенную в точке (sx,sy) в исходном изображении на canvas с шириной cw и высотой ch в точке (cx,cy).

Выведем изображения с разными размерами.

Нельзя вызывать метод drawImage(), если картинка не загружена в браузер. В примере я заранее вывел картинку при помощи тега img. Обычно, в подобных случаях используют вызов window.onload() или document.getElementById(«imageID»).onload.

Ваш браузер не поддерживает canvas

Для сохранения изображений существует три метода (getAsFile,getBlob,toDataURL), самый удобный — toDataURL поскольку именно он наиболее хорошо поддерживается браузерами. Стоит заметить что метод применяется не к контексту, а к canvas элементу, впрочем его можно получить как свойство ‘canvas’ контекста, также этот метод принимает как аргумент тип изображения (по умолчанию ‘png’). Этот метод вернет изображение в формате base64.

Рисование текста

Существуют функции рисование текста. Залитый текст рисуется через функцию context.fillText(string text, float x, float y) в точке (x;y)

Функция fillText() имеет необязательный аргумент maxWidth, который не совсем корректно работает в некоторых браузерах.

Свойство контекста font управляет стилем текста и имеет синтаксис схожий с css:

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

Для стилей используются следующие значения

• normal(the default)
• italic
• oblique(similar to italic, usually associated with sans-serif faces)
• inherit (style comes from the parent element)

Для веса используются значения:

• normal(the default)
• bold | bolder
• lighter
• 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• inherit(weight comes from the parent element)

• px — pixels
• pt — points
• em

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

• Sans-serif: Arial, Verdana
• Serif: Georgia, Times New Roman, Times
• Monospace: Courier New, Courier

Управлять цветом мы можем через свойства fillStyle и strokeStyle.

Для рисования контуров текста применяется функции strokeText() вместо fillText().

Для выравнивания текста существует свойство textAlign, оно может принимать пять возможных значений:

• left — текст выравнивается слева
• right — текст выравнивается справа
• center — текст выравнивается по центру
• start — (значение по умолчанию) текст выравнивается от начала линии слева для письма слева на право и выравнивается справа для письма справа налево
• end — текст выравнивается от начала линии справа для письма слева на право и выравнивается слева для письма справа налево

Для управления линией основания текста существует свойство textBaseline, оно может принимать следующие значения:

• top
• hanging
• middle
• alphabetic
• ideographic
• bottom

Измерить ширину текста можно через measureText(string text). Она вернет специальный объект TextMetrics, который обладает свойством width — ширина текста в пикселях.

Комбинирование наложений

Наложение двух фигур можно осуществить при помощи свойства globalCompositeOperation, которое может принимать одно из значений.

Как пользоваться Canva: популярные и неочевидные возможности

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

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

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

Нажмите на свой профиль → Account Settings → Выберите русский язык в меню Language.

Иллюстрации для соцсетей

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

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

Конструктор презентаций в Canva

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

Найдите шаблоны для презентаций через строку поиска — в новом окне откроется список макетов. В каждом — от 25 до 35 примеров слайдов в одном стиле, которые немного отличаются по структуре. На вкладке «Элементы-диаграммы» есть диаграммы и графики для слайдов, которым можно задавать нужные параметры.

Функции обработки изображений

Среди внутренних инструментов Canva чаще всего используют следующие.

Текст и фильтры

Откройте вкладку «Текст» на левой панели → Напишите текст → Подгоните размер, растянув или сжав текстовую рамку → Выберите шрифт и цвет на верхней панели.

Регулирование прозрачности

Кликните на объект, который хотите изменить → Нажмите на значок «Прозрачность» в верхнем правом углу → Настройте уровень прозрачности ползунком.

Изменение цвета элементов

Кликните на объект, который хотите изменить → Нажмите на значок цвета на верхней панели → Нажмите «+», чтобы создать свой цвет.

Редко используемые шаблоны

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

Готовые бланки. На них можно сделать дипломы, благодарственные письма, сертификаты. В эту группу шаблонов входит также фирменный бланк для компаний — корпоративный документ с логотипом и адресом в верхней части. Найти нужный бланк можно в строке поиска, например, по запросу «Сертификат» или «Фирменный бланк».

Рекламные материалы для распечатки — флаеры, листовки, буклеты, визитки. Искать эти шаблоны также можно в поиске: напишите «Буклет» или «Листовка» и посмотрите все доступные размеры.

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

Шаблоны для новостной рассылки. Найдите «Новостную рассылку» в поиске и выберите шаблон с подходящей структурой. Его можно редактировать: менять цвета, шрифты, фон, вставлять свои фотографии или снимки с фотостока Canva (вкладка «Фото»).

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

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

Найдите «Сайт» в строке поиска, выберите шаблон и редактируйте его — меняйте фон, изображения, логотипы, текст и другие элементы. Результат можно опубликовать как макет в формате PDF, PNG, JPG или как адаптивный сайт. Доступны два способа публикации адаптивных сайтов:

• Публикация дизайна в виде сайта. Дизайн откроется по ссылке и страницы можно будет прокручивать или просматривать как презентацию.
• Генерация HTML-кода. Код можно встроить в сайт или блог, и дизайн отобразиться на странице. Для этого нужно нажать на стрелку публикации в верхнем углу и выбрать вариант «Встроить».

команда сервиса canva

бесплатный курс

Первый шаг
в графическом дизайне

Узнать больше

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

Внутренние функции редактора, о которых знают немногие

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

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

Копирование настроек фотографий и цветов элементов с помощью быстрых сочетаний клавиш (alt+ctrl+C и alt+ctrl+V). Это позволит сохранить единый стиль среди нескольких дизайнов. Отредактируйте текст или изображение → Нажмите alt+ctrl+C → Выберите следующий элемент → Нажмите alt+ctrl+V → Настройки первого элемента скопируются на следующий.

Привязка аккаунта Canva к Facebook и Instagram с возможностью загружать фото прямо из соцсетей. Нажмите на вкладку «Еще» на панели слева → Выберите Instagram или Facebook → Введите данные, чтобы привязать страницы соцсетей.

Возможности сервиса в бесплатной и платной версии

Читать также

16 советов по созданию логотипа от экспертов по брендингу

Лучшие приёмы в минималистичном дизайне

Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.