АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
⊗jsSpCnvLn 262 of 294 menu
Долгожданный Бесплатный курс по выкладке сайта на хостинг. МЫ УЖЕ НАЧАЛИ! Присоединяйтесь к нам!

Рисование линий через 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, 50); //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();

:

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

enru