运用椭圆画法,45行代码画出任意正多边形

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


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

运用椭圆画法,45行代码画出任意正多边形_第1张图片

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

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


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


现在,我们可以上代码了:




	Make Regular Polygon
	
	


	

包括canvas渲染和html tag部分,一共45行。真正意义上的算法部分就只在getPolygonVertices函数里。 这个getPolygonVertices有两个参数,第一个参数是edges边数,第二个参数是圆的半径,决定多变形的大小。
算法在前面已经讲解过了,很简单很基础吧~

运行代码,画出七边形:

运用椭圆画法,45行代码画出任意正多边形_第2张图片

大家可以试着将getPolygonVertices的第一个参数改一改,画出其他多边形。

Ok,搞定收工~


本文到此结束,欢迎大家交流~

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

欢迎继续关注我的博客

你可能感兴趣的:(【算法研究】)