CanvasRenderingContext2D.lineTo()

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

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

Синтаксис

ctx.lineTo(x, y);

Параметры

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

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

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();          // Отображает путь

Результат

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

Каждый вызов 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();

Результаты

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.lineTo' в этой спецификации.
Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
lineToChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 11.6Safari Полная поддержка 2WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 12Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка

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