Как нарисовать неправильный многоугольник?

Question

[maragon]

1. Как нарисовать неправильный многоугольник? (Если речь о canvas везде в примерах обычный прямоугольник, это просто и понятно, но.. как быть с многоугольниками?)
2. Есть длины сторон, ab=1, bc=2, cd=5, de=8, ef=11, возможно ли зная эти значения построить многоугольник в canvas или каком нибудь аналоге?

Comments

[Lynn «Кофеман»]

Возможно. Но в общем случае таких многоугольников бесконечное количество, так что нужны ещё какие-то условия.

[maragon]

Lynn «Кофеман», все углы 90

[Lynn «Кофеман»]

maragon, в пятиугольнике? У вас в школе по геометрии двойка была?

[maragon]

Lynn «Кофеман», сорян, на скорую руку написал ответ :)))) да углы можно рандомно вставить. Мне сама механика построения интересная, зная длины и значения углов. Примеров я не нашел.

[Lynn «Кофеман»]

Не понимаю проблемы. Берёшь и рисуешь линии. Координаты вычисляются по длинам и углам через синус/косинус.
https://developer.mozilla.org/en-US/docs/Web/API/C...

Answer 1

[Сергей Соколов]

Можно без тригонометрии воспользоваться трансформациями canvas.
Двигать точку отсчёта ctx.translate(x, y) и поворачивать на угол ctx.rotate(a).

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


p.s. Где-то встречалась тема, что концом такой конструкции можно нарисовать абсолютно любую фигуру. Хоть портрет в линиях, хоть подпись. Чем больше колен, тем точнее. Если помните такое — киньте ссылку, пожалуйста.

upd. Нашёл! Видео про комплексный ряд Фурье. Посмотрите, вдохновляет.

Comments

[maragon]

fa=3 :) Но, буду тестить, что-то вырисовывается, код интересен.

[maragon]

Сергей Соколов, еще бы комментарии к коду и вообще пушка!)

[Сергей Соколов]

maragon, что именно в коде не понятно?
Общий принцип — двигаем точку отсчёта канвы (0, 0) и поворачиваем её систему отсчёта.

[maragon]

Сергей Соколов, въехал!))) Спасибо!

[Сергей Соколов]

обновил фидл комментами

Answer 2

[Студент Работяга]

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

Comments

[maragon]

Можно пример?

[robprane]

maragon, https://developer.mozilla.org/en-US/docs/Web/API/C...