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

Question

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

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

Этот вопрос, по сути, то же самое.

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

Answer 1

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

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

Answer 2

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