LineTo: примеры (JAVASCRIPT)

Примеры lineTo

Простейший пример рисования линии:

<canvas id='canvas1' width='200' height='200'></canvas>
<script>
  const canvas = document.getElementById('canvas1');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.moveTo(20, 20);
  ctx.lineTo(180, 180);
  ctx.stroke();
</script>

// Результат: диагональная линия из точки (20,20) в (180,180)

Рисование ломаной линии с несколькими вызовами:

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();

// Результат: незамкнутый прямоугольник (трехсторонний контур)

Альтернативные методы JavaScript

• quadraticCurveTo() – Добавляет квадратичную кривую Безье. Используется для плавных кривых с одной контрольной точкой.
• bezierCurveTo() – Добавляет кубическую кривую Безье. Подходит для сложных кривых с двумя контрольными точками.
• arc() – Рисует дугу или круг. Применяется для окружностей и их сегментов.
• rect() – Создает прямоугольный контур. Более удобен для прямоугольников, чем последовательность lineTo.

Метод lineTo предпочтителен для рисования прямых отрезков и многоугольников произвольной формы.

Аналоги в других языках

Python (PIL/Pillow):

from PIL import Image, ImageDraw
img = Image.new('RGB', (200, 200), 'white')
draw = ImageDraw.Draw(img)
draw.line((20, 20, 180, 180), fill='black', width=1)
img.show()

В Pillow функция line() рисует линию сразу, а не добавляет в путь.

PHP (GD):

$image = imagecreate(200, 200);
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);
imageline($image, 20, 20, 180, 180, $black);
header('Content-Type: image/png');
imagepng($image);

Функция imageline() рисует линию за один вызов с указанием обеих точек.

C (Windows API):

MoveToEx(hdc, 20, 20, NULL);
LineTo(hdc, 180, 180);

Имеет схожий принцип с текущей позицией пера, но работает в контексте устройства (HDC).

Частые ошибки

1. Пропуск beginPath() приводит к перерисовке всех предыдущих линий:

ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.stroke();
// Новый путь не начат
ctx.moveTo(100, 100);
ctx.lineTo(150, 150);
ctx.stroke(); // Нарисованы обе линии

// Результат: видны две линии, а не только вторая

2. Забывают вызвать stroke(), в результате линия не отображается:

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(100, 100);
// ctx.stroke(); отсутствует

// Результат: пустой canvas

3. Использование дробных координат без сглаживания может давать размытые линии:

ctx.lineTo(100.5, 50.5); // Линия может быть размытой

Изменения в спецификации

Метод lineTo() остается стабильным с момента введения Canvas API. Существенных изменений в синтаксисе или поведении не было. Основные обновления связаны с добавлением новых возможностей в Canvas API, таких как улучшенное сглаживание или поддержка новых типов линий, но сам метод неизменен.

Расширенные примеры

Рисование сетки с помощью вложенных циклов:

ctx.beginPath();
for (let x = 0.5; x < 200; x += 10) {
  ctx.moveTo(x, 0);
  ctx.lineTo(x, 200);
}
for (let y = 0.5; y < 200; y += 10) {
  ctx.moveTo(0, y);
  ctx.lineTo(200, y);
}
ctx.strokeStyle = '#eee';
ctx.stroke();

// Результат: светло-серая сетка 10x10 пикселей

Анимация рисования линии:

let progress = 0;
function animateLine() {
  ctx.clearRect(0, 0, 200, 200);
  ctx.beginPath();
  ctx.moveTo(20, 100);
  ctx.lineTo(20 + progress * 160, 100);
  ctx.stroke();
  progress += 0.01;
  if (progress <= 1) requestAnimationFrame(animateLine);
}
animateLine();

// Результат: плавное рисование горизонтальной линии слева направо

Создание пунктирной линии с использованием setLineDash:

ctx.beginPath();
ctx.setLineDash([5, 3]);
ctx.moveTo(20, 50);
ctx.lineTo(180, 50);
ctx.stroke();

// Результат: пунктирная линия с отрезками 5px и промежутками 3px