正多边形边上点的坐标计算及JS代码定位修正

核心思路 #

正多边形的坐标计算基于极坐标转笛卡尔坐标，先统一顶点编号规则与顺时针角度方向，再针对三个指定点分别推导计算逻辑，替代原代码中错误的点定位逻辑。

基础参数定义（统一规则） #

• 中心坐标：(cx, cy)（通常取画布中心）
• 外接圆半径（顶点到中心距离）：R
• 边数：n（3 ≤ n ≤ 20）
• 单边对应中心角：anglePerSide = 2π / n（弧度制，JS中用Math.PI）
• 初始角度：Math.PI/2（y轴正方向，作为顶点0的起始位置，顶点按顺时针顺序编号）

三个指定点的计算逻辑与代码实现 #

1. 边2与3之间的顶点（距中心最远点）

该点即为顶点2（0-based编号），属于正多边形的外接圆顶点，坐标计算直接用极坐标转笛卡尔：

const anglePerSide = 2 * Math.PI / n;
// 计算顶点2的角度（顺时针旋转2个单边角度）
const vertex2Angle = Math.PI/2 - 2 * anglePerSide;
const point1 = {
  x: cx + R * Math.cos(vertex2Angle),
  y: cy + R * Math.sin(vertex2Angle)
};

注：若原代码顶点起始方向为x轴正方向，可将初始角度改为0，其余逻辑一致。

2. 边4的中点（距中心最近点）

边4对应0-based编号的边3（连接顶点3与顶点4），中点落在正多边形的内切圆上，需先计算内切圆半径，再取两端点角度的平均值：

const anglePerSide = 2 * Math.PI / n;
// 内切圆半径（顶点到中心距离 × 半中心角的余弦值）
const innerRadius = R * Math.cos(anglePerSide / 2);
// 边3两端点的角度
const edge3StartAngle = Math.PI/2 - 3 * anglePerSide;
const edge3EndAngle = Math.PI/2 - 4 * anglePerSide;
// 中点角度为两端点角度的平均值
const midEdge3Angle = (edge3StartAngle + edge3EndAngle) / 2;

const point2 = {
  x: cx + innerRadius * Math.cos(midEdge3Angle),
  y: cy + innerRadius * Math.sin(midEdge3Angle)
};

3. 沿边3顺时针移动2/3处的点

边3对应0-based编号的边2（连接顶点2与顶点3），需通过线性插值两端点坐标得到目标点（直接调整角度无法得到边上的点，这是原代码常见错误）：

const anglePerSide = 2 * Math.PI / n;
// 先获取边2的两个端点坐标
const vertex2 = {
  x: cx + R * Math.cos(Math.PI/2 - 2 * anglePerSide),
  y: cy + R * Math.sin(Math.PI/2 - 2 * anglePerSide)
};
const vertex3 = {
  x: cx + R * Math.cos(Math.PI/2 - 3 * anglePerSide),
  y: cy + R * Math.sin(Math.PI/2 - 3 * anglePerSide)
};
// 顺时针移动2/3，即从顶点2向顶点3方向插值2/3的边长
const point3 = {
  x: vertex2.x + (vertex3.x - vertex2.x) * (2/3),
  y: vertex2.y + (vertex3.y - vertex2.y) * (2/3)
};

常见错误修正说明 #

1. 角度方向混乱：原代码若使用逆时针角度计算，需改为顺时针（角度随顶点编号增加而递减）。
2. 边上点计算错误：直接通过调整极角计算边上的点会导致点不在边的直线段上，必须用顶点坐标线性插值。
3. 顶点与边编号不匹配：需严格统一0-based或1-based编号规则，避免边与对应顶点错位。

内容的提问来源于stack exchange，提问作者Lance Pollard