Сделать сетку из ромбиков, как?

Question

[GineTik]

У меня есть задача сделать вот такую сетку


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

немогу никак придумать способ для создания
также хотел сказать что у меня есть центр canvas-а с координатами 0, 0 и вокруг них нужно разместить ячейки(например могут быть координаты 0, -50 или 100, 50)

Буду благодарен за любой ответ!

Answer 1

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

Чтобы рисовать отдельный ромбик, поможет мысленно дорисовать диагонали ромба: такой растянутый плюс. Центр плюса – центр ромбика.

Пусть x и y это «радиусы» ромба. Есть координаты центра (cx, cy), или, удобнее, (0, 0) – понятны координаты вершин ромба: (-x, 0), (0, -y), (x, 0), (0, y) (по часовой стрелке).

Соседний ромб справа: (0 + 2x, 0) (центр).
Ромб вправо вниз: (0 + x, 0 + y).

При рисовании на canvas удобно запоминать состояние, чтобы потом транслировать координаты, делая центром (0, 0) центр очередного ромбика. Рисовать ромбик, и затем восстанавливать состояние координат канвы из сохранённого.