如何在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的倍数时，多边形才会有水平边。