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