createRadialGradient()¶
Метод createRadialGradient()
создает объект радиального/кругового градиента.
Градиент может использоваться для заливки прямоугольников, окружностей, линий, текста и т. д.
Примечание: Созданный объект линейного градиента используется в качестве значения свойства strokeStyle
или fillStyle
. Для определения различных цветов и их расположения в градиенте используется метод addColorStop()
.
Синтаксис¶
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)
Ссылки¶
- Метод
createRadialGradient()
MDN (рус.)