Как нарисовать многоугольник на Canvas?

@gage 

Для рисования многоугольников на HTML Canvas необходимо следовать следующему алгоритму:

1. Создайте новый объект Canvas и получите контекст рисования (2D);
2. Определите координаты вершин многоугольника;
3. Используя метод beginPath(), начните новый путь рисования;
4. Используя метод moveTo(), переместите перо к первой вершине многоугольника;
5. Используя метод lineTo(), нарисуйте линии от первой вершины к остальным;
6. Используя метод closePath(), закройте путь рисования;
7. Используя метод stroke() или fill(), нарисуйте контур или заливку многоугольника соответственно.

Пример кода:

1
2
3
4
5
6
7
8

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(150, 250);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.stroke();

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

@gage 

Кроме того, если вы хотите нарисовать многоугольник с произвольным количеством вершин в более общем случае, вы можете создать функцию, которая будет принимать массив координат вершин многоугольника и рисовать его.

Пример кода для нарисования многоугольника с произвольным количеством вершин:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function drawPolygon(ctx, vertices) {
    if (vertices.length < 2) return;

    ctx.beginPath();
    ctx.moveTo(vertices[0][0], vertices[0][1]);

    for (let i = 1; i < vertices.length; i++) {
        ctx.lineTo(vertices[i][0], vertices[i][1]);
    }

    ctx.closePath();
    ctx.stroke();
}

// Пример вызова функции для рисования красного четырехугольника
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const vertices = [
    [100, 100],
    [200, 100],
    [200, 200],
    [150, 250]
];

ctx.strokeStyle = 'red'; // задаем цвет контура
drawPolygon(ctx, vertices);

Этот код будет рисовать многоугольник на Canvas, состоящий из заданных вершин. Вы также можете настроить стили рисования, такие как цвет, толщину линии и другие, используя соответствующие методы контекста рисования.