# Рисование линий через canvas на JavaScript

Начнем с простого - с рисования линий. Чтобы понять, как это делается, представьте себе, что у вас есть лист бумаги и карандаш. Вы можете рисовать на этом листе, а можете не рисуя просто перемещать карандаш в нужную точку.

Так же работает и JavaScript: у него есть карандаш (или перо для рисования), в нужное место вы можете перемещать его с помощью метода `moveTo`, а рисовать - с помощью метода `lineTo`.

Оба метода параметрами принимают точку, в которую сдвинуть кончик пера - первым параметром координату по горизонтали, а вторым - по вертикали. Начало координат - точка `0`, `0` - это верхний левый угол элемента.

Когда перо перемещается в нужную точку - метод `moveTo` просто перемещает, а `lineTo` в процессе перемещения рисует линию от текущего положения пера до точки, в которое оно переместится.

Однако, если запустить приведенный выше код - ничего не произойдет: необходимо написать еще две команды: первая команда `beginPath` должна быть указана перед началом рисования линии, а вторая команда `stroke` должна быть вызвана после всех комбинаций `moveTo` и `lineTo` для того, чтобы линия нарисовалась.

Итак, давайте напишем рабочий код для рисования линии:

## Нарисуем линию

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.stroke();`

:

## Нарисуем птичку

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.lineTo(150, 50); ctx.stroke();`

:

## Нарисуем треугольник

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.lineTo(150, 50); ctx.lineTo(50, 50); ctx.stroke();`

:

## Нарисуем квадратик

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.lineTo(150, 150); ctx.lineTo(50, 150); ctx.closePath(); ctx.stroke();`

:

## Замыкание фигур

Для рисования замкнутой фигуры не обязательно делать все линии - последняя линия может нарисоваться автоматически и замкнуть фигуру. Для этого перед методом `stroke` следует вызывать метод `closePath`.

Этот метод пытается закрыть фигуру, рисуя прямую линию из конечной точки в начальную. Если фигура была уже закрыта или является просто точкой, то метод ничего не делает.

Давайте нарисуем треугольник, используя `closePath`:

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.lineTo(150, 150); //ctx.lineTo(50, 50); - этот шаг опускаем ctx.closePath(); ctx.stroke();`

:

## Закрашивание фигур

Вместо метода `stroke` можно использовать метод `fill` - при этом фигура не обязательно должна быть полностью закрытой - она закрасится и так:

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` `let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.lineTo(150, 50); //ctx.lineTo(50, 50); - этот шаг опускаем //ctx.closePath(); - и этот тоже ctx.fill();`

:

## Практические задачи

←→
↑
en ru