—»     —»   Градиенты на HTML5 Canvas
  Раздел: Образование и Изучение   Нет комментариев  

Градиенты на HTML5 Canvas



Как и при помощи CSS, вы также можете создавать градиенты при помощи HTML5 Canvas. Было бы удивительно, если бы такой возможности не было, ведь эта технология столь востребована. Даже несмотря на повсеместное распространение плоского дизайна, всем нам нравится возможность применять незначительные градиенты. Однако если говорить про CSS, то там довольно сложно овладеть техникой их разработки, и именно поэтому сегодня мы хотим рассказать вам о том, как можно сделать это при помощи HTML5 Canvas.

Градиенты можно использовать для заполнения большинства типов фигур вроде прямоугольников, окружностей, линий, текста и так далее. Фигуры на canvas не ограничиваются единым цветом (слава Богу!). Мы считаем, что это довольно интересная техника, которую можно применять к линиям, даже несмотря на то, что на ее внедрение разработчикам в Adobe Illustrator понадобилась целая вечность. Как в случае с Photoshop или Illustrator, здесь представлено 2 типа градиентов.

createLinearGradient(x,y,x1,y1) – позволяет создавать линейные градиенты

createRadialGradient(x,y,r,x1,y1,r1) - позволяет создавать радиальные градиенты

Создаем собственную фигуру, и заполняем ее цветом

Как только у нас появляется готовая форма, нам нужно будет добавить две или более точек перехода цвета. Этот процесс напоминает Photoshop или Illustrator, где задается сначала первое значение цвета градиента, а потом устанавливаются точки переходов или окончания. В Photoshop и Illustrator указывается переход между двумя значения, в то время как вы устанавливаете 2 основных цвета, которые смешиваются между собой. Примерно то же самое можно видеть и в случае с HTML5 Canvas, только здесь вы устанавливаете значения цветов при помощи javascript.

Метод addColorStop() определяет точку перехода цвета и ее расположение в градиенте. Позиции градиента могут указываться в промежутке между 0 и 1.

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

Градиенты на HTML5 Canvas: линейные

Создайте линейный градиент. Заполните прямоугольник этим градиентом:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"green");
grd.addColorStop(1,"blue");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

Результат:

Градиенты на HTML5 Canvas

Как и в случае с Photoshop и Illustrator, в вашем градиенте может быть более 2 цветов. Придерживаясь нашего примера, если вы добавите grd.addColorStop(.4,"red"); между 2 существующими градиентами в javascript, то получите нижеприведенный результат.

Градиенты на HTML5 Canvas

Градиенты на HTML5 Canvas: радиальные

Создайте радиальный или круглый градиент. Заполните прямоугольник этим градиентом:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(.0,"green");
grd.addColorStop(1,"blue");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

Результат:

Градиенты на HTML5 Canvas

Изменение значения зеленого перехода с 0 до .5 сделает переход более резким.

Градиенты на HTML5 Canvas

В завершение

Градиенты на HTML5 Canvas работают по тому же принципу, что и в Photoshop или Illustrator, только здесь вы используете javascript вместо слайдеров. Изучение того, как различные аспекты javascript влияют на результат помогут вам лучше ориентироваться в настройках и создавать более точные и подходящие градиенты.

Доводилось ли вам когда-нибудь создавать градиенты при помощи HTML5 Canvas? Если у вас возникнут какие-либо вопросы, или вы хотите рассказать нам что-то новое и поделиться собственным опытом, то обязательно отпишитесь в комментариях ниже.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 3893   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930