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

近期做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条过圆心的直线，然后这些直线与圆的交点就是多变形的顶点。

把顶点连接起来就是多变形。


如今。我们能够上代码了：

<!DOCTYPE html>
<html>
<head>
	<title>Make Regular Polygon</title>
	<meta charset="utf-8" />
	<script type="text/javascript">
	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 < vertices.length; 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 < edges; k++) {
			var x = Math.cos(ca * ata) * r,
			y = Math.sin(ca * ata) * r;

			list.push([x, y]);

			ca += aiv;
		}

		return list;
	}
	</script>
</head>
<body>
	<canvas id="mycanvas" width="800" height="450"></canvas>
</body>
</html>
包含canvas渲染和html tag部分，一共45行。真正意义上的算法部分就仅仅在getPolygonVertices函数里。 这个getPolygonVertices有两个參数，第一个參数是edges边数，第二个參数是圆的半径。决定多变形的大小。


算法在前面已经解说过了，非常easy非常基础吧~

执行代码，画出七边形：


大家能够试着将getPolygonVertices的第一个參数改一改，画出其它多边形。

Ok，搞定收工~


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

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

欢迎大家转载我的文章。

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

http://blog.csdn.net/yorhomwang

欢迎继续关注我的博客

posted on 2018-01-29 13:38  yjbjingcha  阅读(399)  评论(0)  编辑  收藏  举报

导航