旋转的园

来源：互联网发布：网络协议怎么学编辑：程序博客网时间：2024/04/29 14:35

<head>
<style>
v/:* {behavior:url(#default#VML);}
o/:* {behavior:url(#default#VML);}
x/:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>

function Deg2Rad(Deg)
{
return (Deg*Math.PI / 180);
}

//点x1,y1 经转af(角度)后的新点坐标x2,y2:(椭圆圈不能以此公式计算)
// x2 = x1 * Math.cos(alfa1) - (this.ringrotRx/this.ringrotRy) * y1 * Math.sin(alfa1);
// y2 = y1 * Math.cos(alfa1) + (this.ringrotRy/this.ringrotRx) * x1 * Math.sin(alfa1);

function rotpnt(x1,y1,af)
{
this.x1 = x1;
this.y1 = y1;

var alfa1 = Deg2Rad(af);

this.x2 = this.x1 * Math.cos(alfa1) - this.y1 * Math.sin(alfa1);
this.y2 = this.x1 * Math.sin(alfa1) + this.y1 * Math.cos(alfa1);

}

var originx0 = screen.availWidth/2;    //取屏幕宽度中值
var originy0 = screen.availHeight/2 - 30;  //取屏幕高度中值-30
var originz0 = 0;        //Z值

//-----------------------------------------------------------------------------------
function line0(id,x0,y0,z0,from,to,strokecolor,strokeweight,dashstyle,rotation)
{
var left,top,width,height
var str = "";

left = x0;
top = y0;
str = str +"<v:line id="+id+" style='position:absolute; ";
str = str +" left:"+left+"px;top:"+top+"px;Z-INDEX:"+z0+";rotation:"+rotation+";";
str = str +" from='"+from+"' to='"+to+"' ";
str = str +" strokeweight='"+strokeweight+"pt;' strokecolor='"+strokecolor+"'> ";
str = str +" <v:stroke dashstyle='"+dashstyle+"' /> ";
str = str +"</v:line>";
document.write(str);
}

function line1(fromx,fromy,tox,toy)
{
x0 = fromx;
y0 = fromy;
x1 = tox-fromx;
y1 = toy-fromy;

line0("vml9",x0,y0,3002,"0,0",""+x1+","+y1,"#00FFFF",1,"Dot",0)
}

function ellipsering(id,x0,y0,ra,rb,filled,fillcolor,stroked,strokecolor,strokeweight,rotation)
{
var left,top,width,height
var str = "";

left = x0-ra;
top = y0-rb
width = 2*ra;
height = 2*rb;

str = str +"<v:oval id="+id+" style='position:absolute; ";
str = str +" left:"+left+"px;top:"+top+"px;width:"+width+"px;height:"+height+"px; ";
str = str +" rotation:"+rotation+";z-index:1' filled='"+filled+"' fillcolor="+fillcolor+" stroked='"+stroked+"' strokecolor="+strokecolor+" ";
str = str +" strokeweight="+strokeweight+"pt> ";
str = str +" <v:stroke dashstyle='solid'/> ";
str = str +"</v:oval>";
document.write(str);
}

function Solar(x0,y0,ra,rb,alfa)
{
this.centerx = originx0+x0;
this.centery = originy0+y0;
this.radiusx = ra;
this.radiusy = rb;
this.alfa = alfa;
}

function DrawSolar()
{
var x1,y1,alfa1, x2,y2, x3,y3;
x1 = this.ringrotRx;
y1 = 0;

alfa1 = Deg2Rad(this.ringangle);

x2 = this.ringrotRx * Math.cos(alfa1);
y2 = this.ringrotRy * Math.sin(alfa1);

// 画中心至椭圆心的连线:
line1(originx0,
  originy0,
  originx0 + x2,
  originy0 + y2);

// 画椭圆圈
ellipsering("GLC4",
  originx0 + x2,
  originy0 + y2,
  this.radiusx,
  this.radiusy,
  "f","#0000FF","t","#FFDDFF",1,this.alfa)

// 画小圆球（借用以上的计算结果:x2,y2） originy0
x1 = x2 + this.radiusx;
y1 = y2;

alfa1 = Deg2Rad(this.ballangle);
// x3 = x1 * Math.cos(alfa1) - (this.radiusx/this.radiusy) * y1 * Math.sin(alfa1);
// y3 = y1 * Math.cos(alfa1) + (this.radiusy/this.radiusx) * x1 * Math.sin(alfa1);

x3 = this.radiusx * Math.cos(alfa1);
y3 = this.radiusy * Math.sin(alfa1);

ellipsering("GGG4",
  (originx0 + x2 + x3),
  (originy0 + y2 + y3),
  this.ballradius,
  this.ballradius,
  "t","#0000FF","t","#0000FF",0,"0")
}

function roundmove() {

var x0,y0,a0, x1,y1,a1, x2,y2,a2;

// theTime = setTimeout("roundmove()",20); 此递归调用是错误的.因为已定义roundmove为方法.
theTime = setTimeout("Solar0.Wv()",this.interval);

a1 = Deg2Rad(this.ringangle);
x1 = originx0 + this.ringrotRx * Math.cos(a1);
y1 = originy0 + this.ringrotRy * Math.sin(a1);
this.ringangle += this.ringstep*this.ringdirecttion;

x0 = x1 - originx0;
y0 = y1 - originy0;
obj0 = "vml9";
eval(obj0+".to='"+x0+","+y0+"'");

obj1 = "GLC4";
eval(obj1+".style.left="+(x1-this.radiusx));
eval(obj1+".style.top=" +(y1-this.radiusy));

a2 = Deg2Rad(this.ballangle);
x2 = x1 + this.radiusx * Math.cos(a2) - this.ballradius;
y2 = y1 + this.radiusy * Math.sin(a2) - this.ballradius;
this.ballangle += this.ballstep*this.balldirecttion;

obj2 = "GGG4";
eval(obj2+".style.left="+x2);
eval(obj2+".style.top=" +y2);

this.ringangle = (Math.abs(this.ringangle)>=360)?0:this.ringangle;
this.ballangle = (Math.abs(this.ballangle)>=360)?0:this.ballangle;

window.status = ""+this.radiusx+";"+this.radiusy+";"+this.ringangle+";"+this.ballangle;

}

</SCRIPT>

</head>
<body scroll=yes style="font-family: 宋体; font-style: italic; background-color: #000000; color:#FF00FF">
行星及行星轨迹环。可改变大小，颜色等。点击
<button onclick="Solar0.Wv();">行星</button>开始旋转。(谷来成，2007-3-17)<br><br><br><br>
<script>

line0("vml1",originx0-400,originy0,3001,"0,0","800,0","#0000FF",1,"Dot",0)
line0("vml2",originx0,originy0-300,3002,"0,0","0,550","#0000FF",1,"Dot",0)

var x1=210; //定义行星轨迹环中心的坐标<以屏幕中心为原点>
var y1=0;
var a2=0 ; //定义行星轨迹环中心的坐标相对屏幕中心的旋转角度

p01=new rotpnt(x1,y1,a2);

Solar0 = new Solar(p01.x2,p01.y2,70,40,0);

Solar.prototype.Ds = DrawSolar;
Solar.prototype.Wv = roundmove;

//椭圆环转动即公转:
Solar.prototype.ringrotRx = 210; //椭圆环转动时的X半径
Solar.prototype.ringrotRy = 140; //椭圆环转动时的Y半径

Solar.prototype.ringangle = 30;   //椭圆环转动时的起始角
Solar.prototype.ringstep = 10;   //椭圆环转动时的步长
Solar.prototype.ringdirecttion = 1;  //椭圆环转动方向(1:deasil,clockwise,-1:anticlockwise)

//小球转动即自转:
Solar.prototype.ballradius = 25;   //附在椭圆环上的小球的半径
Solar.prototype.ballangle = -90;   //小球转动时的起始角
Solar.prototype.ballstep = 10;   //小球转动时的步长
Solar.prototype.balldirecttion = -1;  //椭圆环转动方向(1:deasil,clockwise,-1:anticlockwise)

Solar.prototype.interval = 120; //时间间隔

Solar0.Ds();

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