@gage
Для рисования многоугольников на HTML Canvas необходимо следовать следующему алгоритму:
- Создайте новый объект Canvas и получите контекст рисования (2D);
- Определите координаты вершин многоугольника;
- Используя метод beginPath(), начните новый путь рисования;
- Используя метод moveTo(), переместите перо к первой вершине многоугольника;
- Используя метод lineTo(), нарисуйте линии от первой вершины к остальным;
- Используя метод closePath(), закройте путь рисования;
- Используя метод 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();
|
Этот код нарисует пятиугольник, состоящий из пяти точек, расположенных в форме пятиугольника.