Метод Canvas createRadialGradient()
Определение и использование
createLinearGradient() метод для создания объекта градиента.
Градиент может использоваться для заполнения прямоугольников, кругов, линий, текста и т.д.
Совет:Используйте этот объект в качестве strokeStyle или fillStyle значение свойства.
Совет:Используйте addColorStop() Метод определяет различные цвета и положение цветов в объекте gradient.
Пример
Нарисуйте прямоугольник и заполните его радиальным/круговым градиентом:
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);
Синтаксис
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Значение параметра
| Параметр | Описание |
|---|---|
| x0 | X-координата начального круга. |
| y0 | Y-координата начального круга. |
| r0 | Радиус начального круга. |
| x1 | X-координата конца градиентного круга. |
| y1 | Y-координата конца градиентного круга. |
| r1 | Радиус закругления круга. |
Поддержка браузера
Числа в таблице указывают на версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Комментарий:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
