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