Как создать форму многоугольника с плоскими сторонами в HTML5?

Question

Я использую следующий код JS для рисования 16-стороннего многоугольника:

context.beginPath();
var x_offset = 350;
var y_offset = 350;
var sides = 16;
var r = 300;
context.strokeStyle = "#000000";
for (i = 0; i < (sides); i++) {
    x = x_offset + (r * Math.cos(2 * Math.PI * i / sides));
    y = y_offset + (r * Math.sin(2 * Math.PI * i / sides));
    context.moveTo(x, y);
    x = x_offset + (r * Math.cos(2 * Math.PI * (i+1) / sides));
    y = y_offset + (r * Math.sin(2 * Math.PI * (i+1) / sides));
    context.lineTo(x, y);
}
context.stroke();

Это работает нормально, за исключением того, что я хочу, чтобы у многоугольника были «плоские» стороны (вверху, внизу), лево право).На рисунке ниже вы видите 2 многоугольника: многоугольник с красным фоном - это то, чего я хочу достичь, прозрачный многоугольник - это тот, который генерируется с помощью кода выше.

Вопрос: какя могу создать многоугольник с плоскими сторонами, как красный?Мне нужно сделать context.rotate ()?Я бы предпочел не слишком, чтобы избежать всех вещей translate ().

Answer 1

Вы можете просто повернуть на половину угла шага

context.beginPath();
for (var i = 0; i < sides; i++) {
    var angle = 2 * Math.PI * (i + 0.5) / sides;
    var x = x_offset + (r * Math.cos(angle));
    var y = y_offset + (r * Math.sin(angle));
    if (i == 0) context.moveTo(x, y);
           else context.lineTo(x, y);
}
context.closePath();

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

Обратите внимание, что у многоугольника также будут горизонтальные стороны, только если число сторон кратно 4.