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

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

JavaScript

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(.5, 'cyan');
gradient.addColorStop(1, 'green');

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

Результат

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

Specification Status Comment
HTML Living Standard
Определение 'CanvasRenderingContext2D.createLinearGradient' в этой спецификации.
Живой стандарт

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

BCD tables only load in the browser

Специфично для Gecko

  • Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), указание не конечных значений выбрасывает NOT_SUPPORTED_ERR вместо SYNTAX_ERR.

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