1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
---
title: CanvasRenderingContext2D.lineTo()
slug: Web/API/CanvasRenderingContext2D/lineTo
tags:
- API
- Canvas
- Method
translation_of: Web/API/CanvasRenderingContext2D/lineTo
---
<div>{{APIRef}}</div>
<p><code><strong>lineTo()</strong></code> - метод {{domxref("CanvasRenderingContext2D")}}, часть Canvas 2D API, добавляет линию к текущему под пути с конечной точкой с координатами <code>(x, y)</code>.</p>
<p>Сам метод ничего не рисует, он лишь добавляет подпуть к текущему пути, предоставляя его таким методам, как {{domxref("CanvasRenderingContext2D.fill", "fill()")}} и {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}, отрисовывающим сам путь.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox"><em>ctx</em>.lineTo(<em>x</em>, <em>y</em>);
</pre>
<h3 id="Параметры">Параметры</h3>
<dl>
<dt><code>x</code></dt>
<dd>OX значение конца линии.</dd>
<dt><code>y</code></dt>
<dd>OY значение конца линии.</dd>
</dl>
<h3 id="Возвращаемое_значение">Возвращаемое значение</h3>
<p>{{jsxref("undefined")}}.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Рисование_прямых_линий">Рисование прямых линий</h3>
<p>Этот пример рисует прямую линию используя метод <code>lineTo()</code>.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript">JavaScript</h4>
<p>Линия начинается в точке (30, 50), а заканчивается в точке (150, 100).</p>
<pre class="brush: js; highlight:[6]">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(); // Отображает путь</pre>
<h4 id="Результат">Результат</h4>
<p>{{ EmbedLiveSample('Рисование_прямых_линий', 700, 180) }}</p>
<h3 id="Рисование_соединённых_линий">Рисование соединённых линий</h3>
<p>Каждый вызов <code>lineTo()</code> автоматически добавляет текущий подпуть, это означает, что все линии будут обведены и закрашены вместе. Этот пример рисует букву 'M' линиями одного пути.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><canvas id="canvas"></canvas>
</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<pre class="brush: js">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();</pre>
<h4 id="Результаты">Результаты</h4>
<p>{{ EmbedLiveSample('Рисование_соединённых_линий', 700, 180) }}</p>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Интерфейс, определяющий этот метод: {{domxref("CanvasRenderingContext2D")}}</li>
<li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
<li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
</ul>
|
