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 |
---|
HTML Standard # dom-context-2d-createlineargradient-dev |
Совместимость с браузерами
BCD tables only load in the browser
Специфично для Gecko
- Начиная с Gecko 2.0, указание не конечных значений выбрасывает
NOT_SUPPORTED_ERR
вместоSYNTAX_ERR
.
Смотрите также
- Интерфейс, предоставляющий данный метод:
CanvasRenderingContext2D
CanvasRenderingContext2D.createRadialGradient()
(en-US)