Градиенты можно использовать для заполнения большинства типов фигур вроде прямоугольников, окружностей, линий, текста и так далее. Фигуры на 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>Результат:
Как и в случае с Photoshop и Illustrator, в вашем градиенте может быть более 2 цветов. Придерживаясь нашего примера, если вы добавите grd.addColorStop(.4,"red"); между 2 существующими градиентами в javascript, то получите нижеприведенный результат.
Градиенты на 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>Результат:
Изменение значения зеленого перехода с 0 до .5 сделает переход более резким.
В завершение
Градиенты на HTML5 Canvas работают по тому же принципу, что и в Photoshop или Illustrator, только здесь вы используете javascript вместо слайдеров. Изучение того, как различные аспекты javascript влияют на результат помогут вам лучше ориентироваться в настройках и создавать более точные и подходящие градиенты.
Доводилось ли вам когда-нибудь создавать градиенты при помощи HTML5 Canvas? Если у вас возникнут какие-либо вопросы, или вы хотите рассказать нам что-то новое и поделиться собственным опытом, то обязательно отпишитесь в комментариях ниже.
