CanvasRenderingContext2D: метод createRadialGradient()

Метод CanvasRenderingContext2D.createRadialGradient() API холста 2D создаёт радиальный градиент, используя размеры и координаты двух окружностей.

Этот метод возвращает CanvasGradient. Для применения градиента к форме, его необходимо сначала назначить свойству fillStyle или strokeStyle.

createRadialGradient(x0, y0, r0, x1, y1, r1)

Метод createRadialGradient() задаётся шестью параметрами, три из которых определяют начальную окружность, а три — конечную.

x0

Координата x начальной окружности.

y0

Координата y начальной окружности.

r0

Радиус начальной окружности. Должен быть неотрицательным и конечным.

x1

Координата x конечной окружности.

y1

Координата y конечной окружности.

r1

Радиус конечной окружности. Должен быть неотрицательным и конечным.

Радиальный CanvasGradient, инициализированный двумя указанными окружностями.

NotSupportedError DOMException

Выбрасывается, когда в параметрах передаются бесконечные значения.

IndexSizeError DOMException

Выбрасывается, когда в качестве параметра передаётся отрицательный радиус.

В этом примере инициализируется радиальный градиент с помощью метода createRadialGradient(). Затем создаются три цветовые точки между двумя окружностями градиента. Наконец, градиент назначается контексту холста и отображается в заполненном прямоугольнике.

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// Add three color stops
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);

Результат

• Интерфейс, определяющий этот метод: CanvasRenderingContext2D
• CanvasRenderingContext2D.createLinearGradient()
• CanvasRenderingContext2D.createConicGradient()