From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../createlineargradient/index.html | 119 +++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d/createlineargradient') diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html new file mode 100644 index 0000000000..9337731350 --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -0,0 +1,119 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +tags: + - API + - Градиент + - Холст + - метод +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +
{{APIRef}}
+ +

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

+ +

+ +

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

+ +
+

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

+
+ +

Синтаксис

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

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

+ +

Параметры

+ +
+
x0
+
Координата по оси X начальной точки.
+
y0
+
Координата по оси Y начальной точки.
+
x1
+
Координата по оси X конечной точки.
+
y1
+
Координата по оси Y конечной точки.
+
+ +

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

+ +
+
{{domxref("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);
+
+ +

Результат

+ +

{{ EmbedLiveSample('Заполнение_прямоугольника_с_линейным_градиентом', 700, 180) }}

+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}}
+ +

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

+ + + +

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

+ +

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

+ + + +

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

+ + -- cgit v1.2.3-54-g00ecf