CanvasRenderingContext2D: метод createLinearGradient()

Метод CanvasRenderingContext2D.createLinearGradient() API Canvas 2D создает градиент вдоль линии, соединяющей две заданные координаты.

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

createLinearGradient(x0, y0, x1, y1)

Метод createLinearGradient() задается четырьмя параметрами, определяющими начальную и конечную точки линии градиента.

x0

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

y0

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

x1

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

y1

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

Линейный CanvasGradient, инициализированный с указанной линией.

NotSupportedError DOMException

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

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

HTML

<canvas id="canvas"></canvas>

JavaScript

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

// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
const gradient = ctx.createLinearGradient(20, 0, 220, 0);

// Add three color stops
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");

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

Результат

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