CanvasRenderingContext2D.createLinearGradient()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Метод CanvasRenderingContext2D.createLinearGradient()
, предоставляемый Canvas 2D API, создаёт градиент вдоль линии, соединённой двумя точками с заданными координатами.
Этот метод возвращает линейный CanvasGradient
. Для того, чтобы быть добавленным к фигуре, градиент должен быть задан свойством fillStyle
или strokeStyle
.
Примечание: Координаты градиента глобальны, т.е. относятся к текущему пространству координат. При добавлении градиента, его координаты определяются НЕ относительно координат фигур.
Синтаксис
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
Метод createLinearGradient()
принимает четыре аргумента для определения начала и конца точек линии градиента.
Параметры
Возвращаемое значение
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(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
Смотрите также
- Интерфейс, предоставляющий данный метод:
CanvasRenderingContext2D
CanvasRenderingContext2D.createRadialGradient()