Перейти к содержанию

createRadialGradient()

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

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

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

Синтаксис

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)

Ссылки