CanvasRenderingContext2D: метод createConicGradient()
Базовая версия 2023
Новое
С апреля 2023 года данная функция работает на последних версиях устройств и браузеров. Возможно, функция не будет работать на старых устройствах или браузерах.
Метод CanvasRenderingContext2D.createConicGradient() API холста 2D создаёт градиент, расположенный вокруг точки с заданными координатами.
Этот метод возвращает конический CanvasGradient. Для применения градиента к фигуре, его необходимо присвоить к свойству fillStyle или strokeStyle.
Примечание: Координаты градиента глобальные, т.е. относительные к текущему пространству координат. При применении к фигуре, координаты НЕ относительны к координатам фигуры.
Синтаксис
createConicGradient(startAngle, x, y)
Параметры
startAngle-
Угол начала градиента в радианах. Угол отсчитывается от горизонтальной линии, идущей вправо от центра, и продолжается по часовой стрелке.
x-
Координата x центра градиента.
y-
Координата y центра градиента.
Возвращаемое значение
CanvasGradient-
Конический
CanvasGradient.
Примеры
Заполнение прямоугольника коническим градиентом
В этом примере инициализируется конический градиент с помощью метода createConicGradient(). Затем создаётся пять точек цвета вокруг центральной координаты. В заключение градиент присваивается контексту холста и отрисовывается для заполнения прямоугольника.
HTML
<canvas id="canvas" width="240" height="240"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Create a conic gradient
// The start angle is 0
// The center position is 100, 100
const gradient = ctx.createConicGradient(0, 100, 100);
// Add five color stops
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");
// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);
Результат прямоугольника
Спецификации
| Спецификация |
|---|
| HTML # dom-context-2d-createconicgradient-dev |
Совместимость с браузерами
| Рабочие столы | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
createConicGradient |
99 | 99 | 11290Реализует более старую версию спецификации. Градиент начинается с вертикальной линии, идущей вверх от центра, как и в эквивалентной CSS-функции. |
85 | 16.115Реализует более старую версию спецификации. Градиент начинается с вертикальной линии, идущей вверх от центра, как и в эквивалентной CSS-функции. |
99 | 11290Реализует более старую версию спецификации. Градиент начинается с вертикальной линии, идущей вверх от центра, как и в эквивалентной CSS-функции. |
68 | 16.115Реализует более старую версию спецификации. Градиент начинается с вертикальной линии, идущей вверх от центра, как и в эквивалентной CSS-функции. |
18.0 | 99 |
См. также
- Интерфейс, определяющий этот метод:
CanvasRenderingContext2D CanvasGradientCanvasRenderingContext2D.createLinearGradient()CanvasRenderingContext2D.createRadialGradient()
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient
