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 Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

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

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