如何在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（）吗？我宁愿不要，以避免所有的翻译（）的东西。

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