CanvasRenderingContext2D.createLinearGradient()

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

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

Примечание: Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.

Синтаксис

CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);

Метод createLinearGradient() принимает четыре аргумента для определения начала и конца точек линии градиента.

Параметры

x0

Координата по оси X начальной точки.

y0

Координата по оси Y начальной точки.

x1

Координата по оси X конечной точки.

y1

Координата по оси Y конечной точки.

Возвращаемое значение

CanvasGradient

Линейный CanvasGradient, определённый линией.

Примеры

Заполнение прямоугольника с линейным градиентом

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

HTML

html

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

JavaScript

js

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

// Создание линейного градиента
// Точка начала линии градиента: x=20, y=0
// Точка конца линии градиента: x=220, y=0
var gradient = ctx.createLinearGradient(20, 0, 220, 0);

// Добавление трёх контрольных точек
gradient.addColorStop(0, "green");
gradient.addColorStop(0.5, "cyan");
gradient.addColorStop(1, "green");

// Установка стиля заливки и отрисовка прямоугольника градиента
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 100);

Результат

Спецификации

Specification
HTML Standard
# dom-context-2d-createlineargradient-dev

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также