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' в этой спецификации.
Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
createLinearGradientChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

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

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

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