Метод HTML 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, "красный");
grd.addColorStop(1, "белый");
// Заполнить градиентом
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>.
