Html5 绘制N角形

最新推荐文章于 2021-12-04 17:47:19 发布

Leon-

最新推荐文章于 2021-12-04 17:47:19 发布

阅读量683

点赞数 1

分类专栏：前端文章标签： html5 N角形绘制

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

转载自：

http://www.zybang.com/question/0bb53a7133bd38703648c478d598209e.html

代码如下：

<html>

<head></head>

<body>

<canvas id="mc" width="400" height="380" style="border:1px solid black"></canvas>

<script type="text/javascript">

function createStar(context,n,dx,dy,size)
{
	context.beginPath();
	var dig = Math.PI / n * 4;
	for(var i=0;i<n;i++)
	{
		var x = Math.sin(i*dig);
		var y = Math.cos(i*dig);
		context.lineTo(x*size+dx,y*size+dy);

		//alert(x*size+dx);
		//alert(y*size+dy);
	}
	context.closePath();
}

var canvas = document.getElementById('mc');

var ctx = canvas.getContext('2d');

createStar(ctx,3,60,60,50);
ctx.fillStyle="#f00";
ctx.fill();

createStar(ctx,5,160,60,50);
ctx.fillStyle="#f00";
ctx.fill();

createStar(ctx,7,260,60,50);
ctx.fillStyle="#f00";
ctx.fill();
ctx.fillStyle="#f00";
ctx.fill();

createStar(ctx,9,360,60,50);
ctx.fillStyle="#f00";
ctx.fill();

</script>
</body>
</html>

程序可以改动一下，看起来会更容易一点。

// 开始创建路径

context.beginPath();

var dig = Math.PI / n * 4;

//改：var dig = 2*(2*Math.PI / n) ;

//括号里就是将360度平均分成n份

//为什么前面还要乘以2，见下面（2.画这类图形的技巧（或者说规律。））

for(var i = 0; i < n ; i++)

{

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(x * size + dx ,y *size + dy);

//上面三行改成：

//var x = dx+size*Math.sin(i *dig); //（1）

//var y = dy+size*Math.cos(i *dig); //（2）

//context.lineTo(x,y);

//（1），（2）其实是圆的参数方程

//把（1），（2）再改，如下：

//varx=dx+size*Math.cos(Math.PI/2-i*dig);//sin变cos

//vary=dy+size*Math.sin(Math.PI/2-i*dig);//cos变sin

}

context.closePath();

首先至少掌握三点知识。

1.这类图形的特点。

2.画这类图形的技巧（或者说规律。）

3.圆的参数方程。

变量：

n:N角星的顶点数。

dx,dy: N角星的位置，也是N角星中心点的坐标

size: N角星的大小，也是N角星任一顶点到N角星中心点的距离。

angle: 相邻顶点到中心点形成的夹角度

dig: 每一段两点顶点与中心点形成的夹角度

1.这类图形的特点。

特点：

（1）所有的顶点都在一个圆上。圆心O为图形的中心点，半径r为中心点到任一顶点的距离,即size。

（2）任意相邻的两个顶点到中心点所形成的角度相等。则angle=2*PI/n：

2.画这类图形的技巧（或者说规律。）

你给的程序画出来的图形，每画一条线段之间跳过了一个顶点。

举个例子，拿七角星来讲，首先先给七角星的顶点按顺时针编号，即1-7。

你给的程序是这么连的：1-3-5-7-2-6-4-6-1 ,

跟据这点，可得出一个规律：

1-3-5-7-2-6-4-6-1，这个数列，每相邻的两点与中心点形成的角度相等。

即1-3，3-5...形成的角度相等，这个角度即是dig=2*angle。

如果改成dig=angle的话，也就是说

var dig = Math.PI / n * 4;

那么画出来的图形如下：

3.圆的参数方程.

方程如下：（x0,y0）为中心点的坐标。即(dx,dy)，a为角度，r为半径即size

x=x0+r*cos(a);

y=y0+r*sin(a);

举个例，画7角星：

从0度的点开始画：按1-3-5-7-2-6-4-6-1画,

那么，

第1点：x=dx+size*cos(0);y=dy+size*sin(0);

第3点：x=dx+size*cos(0+dig*1);y=dy+size*sin(0+dig*1);

第5点:x=dx+size*cos(0+dig*2);y=dy+size*sin(0+dig*2);

...

表达有限，比较凌乱，哈哈。

根据这个原理，我写出下面的函数，画出来的星形比较“骨感”：

//参数的意思与你给出来的一样。

//注，num不能为偶数，否则画出来的不是星形

function drawStar(pan2d,num,x,y,size)

{

pan2d.beginPath();

var startAngle=-Math.PI*0.5;// 起点角度

var dig=Math.PI-Math.PI/num;//vardig=Math.PI-2*Math.PI/num*0.5;

for(var i=0;i<num;i+=1)

{

varangle=startAngle+dig*i;

var px=x+size*Math.cos(angle);

varpy=y+size*Math.sin(angle);

pan2d.lineTo(px,py);

}

pan2d.closePath();

pan2d.stroke();

}

△注意：

sin函数取弧度，不止取角度

Leon-

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5 绘制N角形

转载自：http://www.zybang.com/question/0bb53a7133bd38703648c478d598209e.html程序可以改动一下，看起来会更容易一点。// 开始创建路径 context.beginPath(); var dig = Math.PI / n * 4; //改：var dig = 2*(2*Math.PI /
复制链接

扫一扫