Нарисуйте самопересекающийся многоугольник на холсте HTML

Question

Я ищу способ нарисовать самопересекающийся многоугольник с отверстиями, я использую элемент HTML Canvas.

Итак, учитывая 5 баллов, я хочу нарисовать красный ниже.

Этот вопрос, по сути, одно и то же.

Примечание: я не хочу делать это, используя пересечения линий и добавляя больше точек, фактические пути, которые я буду использовать, будут изогнуты.

Answer 1

Вы не можете нарисовать первую пентаграмму с одним путем в Canvas 2D - там используется правило заполнения четное-нечетное , и Canvas заполняет фигуры ненулевым Правило намотки.

Я думаю, вам нужно будет вычислить точки пересечения для углов внутреннего пятиугольника и заполнить их отдельно. Чтобы получить рисунок, который вы используете в качестве примера, вы можете заполнить пентаграмму (без линий обводки), заполнить внутренний пятиугольник (снова без линий обводки), а затем нарисовать контурную обводку пятиугольника без заливки.

Answer 2

Я в основном уверен, что ты не хочешь нарисовать все сам, не так ли? http://gpolo.awardspace.info/fill/main.html показывает, что это делается, но это все ручная работа.