Javascript图形学-线-五角星

来源：互联网发布：温度控制算法编辑：程序博客网时间：2024/04/29 01:11

在上一篇线对象的基础上，我们就可以按照我们自己的一些意愿构造一些我们想要的图形，比如这里所要演示的五角星图形的绘制

构造一个五角星图形对象，参数有圆心坐标，半径r和展示的容器

文件为FiveAngle.js

//x0,y0,z0是圆心位置,R是半径
//编写了一个PointData对象，用以专门装载点的坐标数据的
function FiveAngle(x,y,z,r,srcScreen)
{
var x0=x,y0=y,z0=z,R=r,r0=-90;
var point5=new Array();
var data;
var x,y;
var lines=new Array();
var line,centerPoint;
var r1=255,g1=255,b1=255,r2=255,g2=255,b2=255,r3=255,g3=255,b3=255,r4=255,g4=255,b4=255,r5=255,g5=255,b5=255;
this.setColor=function(index,r,g,b)
{
  if(1==index)
  {
   r1=r;
   g1=g;
   b1=b;
  }
  if(2==index)
  {
   r2=r;
   g2=g;
   b2=b;
  }
  if(3==index)
  {
   r3=r;
   g3=g;
   b3=b;
  }
   if(4==index)
  {
   r4=r;
   g4=g;
   b4=b;
  }
   if(5==index)
  {
   r5=r;
   g5=g;
   b5=b;
  }
}
//计算5个顶点数据坐标并放在数组里面
for(var i=0;i<5;i++)
{
  x=x0+Math.round(Math.cos((i*72+r0)*Math.PI/180)*R);
  y=y0+Math.round(Math.sin((i*72+r0)*Math.PI/180)*R);
  //new Point3D(x,y,0,"rgb(255,255,255)",4,srcScreen); //绘制5个顶点
  data=new PointData(x,y,z0);
  point5.push(data);
}
this.show=function()
{
  //对5个点进行连线
  line=new Line3D(point5[0].getX(),point5[0].getY(),0,point5[2].getX(),point5[2].getY(),0,srcScreen,r1,g1,b1,r2,g2,b2);
  lines.push(line);
  line=new Line3D(point5[2].getX(),point5[2].getY(),0,point5[4].getX(),point5[4].getY(),0,srcScreen,r2,g2,b2,r3,g3,b3);
  lines.push(line);
  line=new Line3D(point5[4].getX(),point5[4].getY(),0,point5[1].getX(),point5[1].getY(),0,srcScreen,r3,g3,b3,r4,g4,b4);
  lines.push(line);
  line=new Line3D(point5[1].getX(),point5[1].getY(),0,point5[3].getX(),point5[3].getY(),0,srcScreen,r4,g4,b4,r5,g5,b5);
  lines.push(line);
  line=new Line3D(point5[3].getX(),point5[3].getY(),0,point5[0].getX(),point5[0].getY(),0,srcScreen,r5,g5,b5,r1,g1,b1);
  lines.push(line);
}
this.showCenterPoint=function(color)
{
  if(color==undefined){color="rgb(255,255,255)";}
  centerPoint=new Point3D(x0,y0,z0,color,4,srcScreen); //绘制圆心
}

}

接着编写一个测试的test.html如下

</head>
<body>
<style>
html {overflow:hidden}
body, .screen {background:#000; overflow:hidden; width:100%; height:100%; position:absolute; margin:0; padding:0}
#screen {left:0; top:0; zoom:1}
#screen span {position:absolute; font-size:0; line-height:0; overflow:hidden}
</style>
<div id="screen" class="screen"></div>
<script>
var srcScreen=document.getElementById("screen");

//下面绘制一个五角星
var fiveAngle=new FiveAngle(500,200,0,150,srcScreen);
fiveAngle.setColor(1,255,0,0);
fiveAngle.setColor(2,0,255,0);
fiveAngle.setColor(3,0,0,255);
fiveAngle.setColor(4,0,255,255);
fiveAngle.showCenterPoint("rgb(255,0,0)");
fiveAngle.show();

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

展示效果如下