canvas标签画正多边形函数

最新推荐文章于 2024-04-18 06:45:00 发布

Andy Ron

最新推荐文章于 2024-04-18 06:45:00 发布

阅读量3.7k

点赞数

分类专栏： html5 文章标签： canvas html5 正多边形

本文链接：https://blog.csdn.net/u012948710/article/details/20048861

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<canvas id="canvas" width="600px" height="500px" style="border:1px solid #A6A7A6;"></canvas>
<script>
	/*
	*以(x,y)为中心，半径为r的正n边形
	*@param c 是canvas的上下文对象
	*@param angle 是第一个点(以最上面的顶点为准)偏离中心点(x,y)的弧度
	*	angle为0时第一个点和中心的x想等，如第一个正方形
	#@param counterclockwise 是angle偏离是顺时针还是逆时针
	*/

	function polygon(c,n,x,y,r,angle,counterclockwise){
		var angle = angle || 0;
		var counterclockwise = counterclockwise || false;
		c.moveTo(x + r*Math.sin(angle), y - r*Math.cos(angle));		//确立第一个点
		var delta = 2*Math.PI/n;		//相邻两个顶点之间的夹角
		for(var i=0;i<n;i++){			//其他顶点
			angle += counterclockwise ? -delta : delta;		//角度调整
			c.lineTo(x + r*Math.sin(angle), y - r*Math.cos(angle));
		}
		c.closePath();		//首位相邻

	}
	var canvas = document.getElementById('canvas');
	var c = canvas.getContext("2d");
	c.beginPath();
	polygon(c,4,60,200,40);
	polygon(c,4,180,200,40,Math.PI/4);
	polygon(c,6,300,200,40,Math.PI/6);
	polygon(c,12,460,200,40);
	c.fillStyle = '#f00';
	c.fill();
</script>

Andy Ron

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas标签画正多边形函数

/* *以(x,y)为中心，半径为r的正n边形 *@param c 是canvas的上下文对象 *@param angle 是第一个点(以最上面的顶点为准)偏离中心点(x,y)的弧度 * angle为0时第一个点和中心的x想等，如第一个正方形 #@param counterclockwise 是angle偏离是顺时针还是逆时针 */ function polygon(c,n,x,y
复制链接

扫一扫