From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../api/canvasrenderingcontext2d/lineto/index.html | 116 +++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 files/ru/web/api/canvasrenderingcontext2d/lineto/index.html (limited to 'files/ru/web/api/canvasrenderingcontext2d/lineto') diff --git a/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html new file mode 100644 index 0000000000..b09732cc5e --- /dev/null +++ b/files/ru/web/api/canvasrenderingcontext2d/lineto/index.html @@ -0,0 +1,116 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +tags: + - API + - Canvas + - Method +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +
{{APIRef}}
+ +

lineTo() - метод {{domxref("CanvasRenderingContext2D")}}, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с короординатами (x, y).

+ +

Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоствляя его таким методам, как {{domxref("CanvasRenderingContext2D.fill", "fill()")}} и {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}, отрисовывающим сам путь.

+ +

Синтаксис

+ +
ctx.lineTo(x, y);
+
+ +

Параметры

+ +
+
x
+
OX значение конца линии.
+
y
+
OY значение конца линии.
+
+ +

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

+ +

{{jsxref("undefined")}}.

+ +

Примеры

+ +

Рисование прямых линий

+ +

Этот пример рисует прямую линию используя метод lineTo().

+ +

HTML

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

JavaScript

+ +

Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();       // Начинает новый путь
+ctx.moveTo(30, 50);    // Рередвигает перо в точку (30, 50)
+ctx.lineTo(150, 100);  // Рисует линию до точки (150, 100)
+ctx.stroke();          // Отображает путь
+ +

Результат

+ +

{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}

+ +

Рисование соединенных линий

+ +

Каждый вызов lineTo() автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.moveTo(90, 130);
+ctx.lineTo(95, 25);
+ctx.lineTo(150, 80);
+ctx.lineTo(205, 25);
+ctx.lineTo(210, 130);
+ctx.lineWidth = 15;
+ctx.stroke();
+ +

Результаты

+ +

{{ EmbedLiveSample('Рисование_соединенных_линий', 700, 180) }}

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}}
+ +

Поддержка браузерами

+ + + +

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

+ +

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

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