最近做Box2dWeb开发时，想写个创建正多边形的功能，可是由于学识尚浅，我在草稿纸上画了，想了一个上午也没有研究出什么好方法。后来翻抽屉的时候，找出了以前哥哥画的一张用同心圆画椭圆的示意图。看到这幅画，我不禁在想椭圆不就是一个N边形吗？圆不就是一个正N边形吗？如果把两个同心圆的半径设定为相等，画出来的椭圆不就是一个圆吗？因此，我立刻开始实验。原本我以为比较难，会用到圆的解析式之类的，没想到就45行代码就搞定了，主要用到的数学知识就是sin和cos。

也许有人不明白如何用同心圆画椭圆，我就借用网上找的一张图片给大家展示吧

这个画法很经典，做法简要概括一下就是：

画一个同心圆，然后以圆心为原点画一个二维坐标系；接着用N条过圆心的直线将圆等分，图中所示就是4条，把圆等分为了12份。每条直线都会与两个圆有交点，这时候我们就可以确定椭圆上的一个点——设直线与小圆的交点为(a, b)，与大圆的交点为(c, d)，确定的那个点的坐标则为(c, b)；我们有N条直线就会得出2 * N + 4这样的点。可以看出，得到的点的坐标通式为：(与大圆的交点的x坐标, 与小圆的交点的y坐标)。要得到这些坐标，我们只用知道直线的条数N和大圆小圆的半径(或直径)，然后用sin和cos进行计算即可。得到这些点后，把这些点连接起来就大致是个椭圆了；如果你把N的数目设定的越大，那么画出来的图形就更接近于椭圆。

与画椭圆不同的是，画正多边形不需要这么复杂，只需要一个圆就够了。而且也不要什么坐标系了，你要N 边形就画N条过圆心的直线，然后这些直线与圆的交点就是多变形的顶点。把顶点连接起来就是多变形。

现在，我们可以上代码了：

html>

Make Regular Polygon

window.onload = function () {

var canvasTag = document.getElementById("mycanvas");

var c = canvasTag.getContext("2d");

var vertices = getPolygonVertices(7, 100);

c.beginPath();

c.fillStyle = "lightgray";

c.fillRect(0, 0, canvasTag.width, canvasTag.height);

c.translate(canvasTag.width / 2, canvasTag.height / 2);

c.moveTo(vertices[0][0], vertices[0][1]);

for (var i = 1; i

c.lineTo(vertices[i][0], vertices[i][1]);

}

c.lineWidth = 5;

c.closePath();

c.stroke();

};

function getPolygonVertices (edges, r) {

var ca = 0, aiv = 360 / edges, ata = Math.PI / 180, list = new Array();

for (var k = 0; k

var x = Math.cos(ca * ata) * r,

y = Math.sin(ca * ata) * r;

list.push([x, y]);

ca += aiv;

}

return list;

}

包括canvas渲染和html tag部分，一共45行。真正意义上的算法部分就只在getPolygonVertices函数里。 这个getPolygonVertices有两个参数，第一个参数是edges边数，第二个参数是圆的半径，决定多变形的大小。

算法在前面已经讲解过了，很简单很基础吧~