Метод createRadialGradient() создает объект радиального/кругового градиента.
Градиент может использоваться для заливки прямоугольников, окружностей, линий, текста и т.д.
Примечание: Созданный объект линейного градиента используется в качестве значения свойства strokeStyle или fillStyle. Для определения различных цветов и их расположения в градиенте используется метод addColorStop().
JavaScript синтаксис: | context.createRadialGradient(x0, y0, r0, x1, y1, r1); |
Значения параметров
Параметр | Описание |
---|---|
x0 | Координата X начальной окружности градиента |
y0 | Координата Y начальной окружности градиента |
r0 | Радиус начальной окружности градиента |
x1 | Координата X конечной окружности градиента |
y1 | Координата Y конечной окружности градиента |
r1 | Радиус конечной окружности градиента |
Пример использования
Нарисуем прямоугольник и заполним его радиальным градиентом:
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);