星球变量名公转周期光色暗色
水星mercury87.70#a69697#5c3e40
金星venus224.701.70#c4bbac#1f1315
地球earth365.2422#78b1e8#050c12
火星mars686.98#cec9b6#76422d
木星jupiter4332.589#c0a48e#322
土星saturn10759.95#f7f9e3#5c4553
天王星uranus30799.095#a7e115#19243a
海王星neptune60152.95#0661b2#1e3b73
<canvas id=canvas width=1000 height=1000 style=background-color: #000;></canvas>
代码如下:
var canvas=document.getelementbyid(canvas);
var cxt=canvas.getcontext(2d);
function drawtrack(){
for(var i=0;i<8;i++){
cxt.beginpath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closepath();
cxt.strokestyle=#fff;
cxt.stroke();
}
}
function drawstart(x,y,radius,cycle,scolor,ecolor){
//画出星球需要哪些属性
//星球的坐标点
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//星球的颜色(开始色,结束色)
this.scolor=scolor;
this.ecolor=ecolor;
//创建一个渐变色空对象
this.color=null;
this.time=0;
//公共周期
this.cycle=cycle;
this.draw=function(){
cxt.save();
cxt.translate(500,500);
//设置旋转角度
cxt.rotate(this.time*360/this.cycle*math.pi/180);
cxt.beginpath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closepath();
this.color=cxt.createradialgradient(this.x,this.y,0,this.x,this.y,this.radius);
this.color.addcolorstop(0,this.scolor);
this.color.addcolorstop(1,this.ecolor);
cxt.fillstyle=this.color;
cxt.fill();
cxt.restore();
this.time+=1;
}
}</p> <p> function sun(){//太阳1
drawstart.call(this,0,0,20,0,#f00,#f90);
}
function mercury(){//水星2
drawstart.call(this,0,-50,10,87.70,#a69697,#5c3e40);
}
function venus(){//金星3
drawstart.call(this,0,-100,10,224.71,#c4bbac,#1f1315);
}
function earth(){//地球4
drawstart.call(this,0,-150,10,365.224,#78b1e8,#050c12);
}
function mars(){//火星5
drawstart.call(this,0,-200,10,686.98,#cec9b6,#76422d);
}
function jupiter(){//木星6
drawstart.call(this,0,-250,10,4332.589,#c0a48e,#322);
}
function saturn(){//土星7
drawstart.call(this,0,-300,10,10759.5,#f7f9e3,#5c4533);
}
function uranus(){//天王星8
drawstart.call(this,0,-350,10,30799.95,#a7e1e5,#19243a);
}
function neptune(){//天王星9
drawstart.call(this,0,-400,10,60152.95,#0661b2,#1e3b73);
}
var s=new sun();//1
var m=new mercury();//2
var v=new venus();//3
var e=new earth();//4
var ma=new mars();//5
var j=new jupiter();//6
var sa=new saturn();//7
var ur=new uranus();//8
var ne=new neptune();//9
setinterval(function(){
cxt.clearrect(0,0,1000,1000);
drawtrack();
s.draw();
m.draw();
v.draw();
e.draw();
ma.draw();
j.draw();
sa.draw();
ur.draw();
ne.draw();
},10);
中国足彩网信息请查看IT技术专栏