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

Пользователь

от gage , в категории: Другие , 10 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от francisco.friesen , 10 месяцев назад

@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();




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