Javascript метод createRadialGradient()

Метод createRadialGradient() создает объект радиального/кругового градиента.

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

Примечание: Созданный объект линейного градиента используется в качестве значения свойства strokeStyle или fillStyle. Для определения различных цветов и их расположения в градиенте используется метод addColorStop().

JavaScript синтаксис: context.createRadialGradient(x0, y0, r0, x1, y1, r1);

Значения параметров

Параметр Описание
x0 Координата X начальной окружности градиента
y0 Координата Y начальной окружности градиента
r0 Радиус начальной окружности градиента
x1 Координата X конечной окружности градиента
y1 Координата Y конечной окружности градиента
r1 Радиус конечной окружности градиента

Пример

Нарисуем прямоугольник и заполним его радиальным градиентом:

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

JavaScript:


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

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Заполнить фигуру градиентом
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);