無标題文檔
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
var Sun=new Sun();
var Mercury=new Mercury();
var Venus=new Venus();
var Earth=new Earth();
var Mars=new Mars();
var Jupiter=new Jupiter();
var Saturn=new Saturn();
var Uranus=new Uranus();
var Neptune=new Neptune();
//畫軌迹路線
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.strokeStyle="#fff";
cxt.arc(650,650,(i+1)*60,0,2*Math.PI,false);
cxt.closePath();
cxt.stroke();
}
}
drawTrack();
function star(x,y,radius,cycle,scolor,ecolor){
this.x=x;
this.y=y;
this.radius=radius;
this.scolor=scolor;
this.ecolor=ecolor;
this.cycle=cycle;
this.color=null;
this.time=0;
this.draw=function(){
cxt.save();
cxt.translate(650,650);
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,2*Math.PI,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++;
}
}
//畫球
function Sun(){
star.call(this,0,0,20,0,"#FFFF00","#FF9900");
}
function Mercury(){
star.call(this,0,-60,6,87.70,"#A69697","#5C3E40");
}
function Venus(){
star.call(this,0,-120,8,224.701,"#C4BBAC","#1F1315");
}
function Earth(){
star.call(this,0,-180,10,365.2422,"#78B1E8 ","#050C12");
}
function Mars(){
star.call(this,0,-240,6,686.98,"#CEC9B6","#76422D");
}
function Jupiter(){
star.call(this,0,-300,16,4332.589,"#C0A48E","#322222");
}
function Saturn(){
star.call(this,0,-360,14,10759.5,"#F7F9E3","#5C4533");
}
function Uranus(){
star.call(this,0,-420,12,30799.095,"#A7E1E5","#19243A");
}
function Neptune(){
star.call(this,0,-480,10,60152,"#0661B2","#1E3B73");
}
//轉動
function move(){
cxt.clearRect(0,0,1300,1300);
drawTrack();
Sun.draw();
Mercury.draw();
Venus.draw();
Earth.draw();
Mars.draw();
Jupiter.draw();
Saturn.draw();
Uranus.draw();
Neptune.draw();
}
setInterval(move,10);
