JavaScript+canvas 绘制多边形

效果图：

<body>
<canvas id="square" width="500"></canvas>
<canvas id="circle"></canvas>

<script type="text/javascript">
function polygon(c,n,x,y,r,angle,counterclockwise){
	angle = angle || 0;
	counterclockwise = counterclockwise ||false;
	c.moveTo(x+r*Math.sin(angle),		//从第一个顶点开始一条新的子路径
				y-r*Math.cos(angle));	//使用三角法计算位置
	var delta = 2*Math.PI/n;			//两个顶点之间的夹角
	for(var i=1 ; i < n ; i++){			//循环剩余的每个顶点
		angle += counterclockwise ? -delta:delta;	//调整角度
		c.lineTo(x+r*Math.sin(angle),	//以下个顶点为端点添加线段
			y-r*Math.cos(angle));
	}
	c.closePath(); 		//将最后一个顶点和起点连接起来
}

var convas = document.getElementById('square');
var c=convas.getContext("2d");

//开始一个新的路径并添加一条多边形子路径
c.beginPath();
polygon(c,3,50,70,50);		//三角形
polygon(c,4,150,60,50,Math.PI/4);		//正方形角形
polygon(c,5,255,55,50);		//五角形
polygon(c,6,365,53,50,Math.PI/6);		//六角形
polygon(c,4,365,53,20,Math.PI/4,true);		//六边形中的小正方形

//设置属性来控制图形外观
c.fillStyle = "#ccc" ; 		//内部使用浅灰色
c.strokeStyle = "#008"; 	//深蓝色外边框
c.lineWidth =2;		 		//2个像素宽

//调用如下函数绘制所有这些多边形（每个分别定义在自己的子路径中）
c.fill();
c.stroke();

</script>
</body>

　　

posted @ 2017-06-02 09:14  newAdmin  阅读(3105)  评论(0)    收藏  举报