1 <canvas id="canvas" width="1000" height="1000" style="background-color: #000;"></canvas>

 1     var canvas=document.getElementById("canvas"); 2     var cxt=canvas.getContext("2d"); 3    4     function DrawTrack(){ 5         for(var i=0;i<8;i++){ 6             cxt.beginPath(); 7             cxt.arc(500,500,(i+1)*50,0,360,false); 8             cxt.closePath(); 9             cxt.strokeStyle="#fff";10             cxt.stroke();11         }12     }13     function DrawStart(x,y,radius,cycle,sColor,eColor){14         //画出星球需要哪些属性15 16         //星球的坐标点17         this.x=x;18         this.y=y;19         //星球的半径20         this.radius=radius;21         //星球的颜色(开始色,结束色)22         this.sColor=sColor;23         this.eColor=eColor;24         //创建一个渐变色空对象25         this.color=null;26         this.time=0;27         //公共周期28         this.cycle=cycle;29         this.draw=function(){30             cxt.save();31             cxt.translate(500,500);32             //设置旋转角度33             cxt.rotate(this.time*360/this.cycle*Math.PI/180);34             cxt.beginPath();35             cxt.arc(this.x,this.y,this.radius,0,360,false);36             cxt.closePath();37             this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);38             this.color.addColorStop(0,this.sColor);39             this.color.addColorStop(1,this.eColor);40             cxt.fillStyle=this.color;41             cxt.fill();42             cxt.restore();43             this.time+=1;44         }45     }46 47 48     function Sun(){//太阳149         DrawStart.call(this,0,0,20,0,"#f00","#f90");50     }51     function Mercury(){//水星252         DrawStart.call(this,0,-50,10,87.70,"#A69697","#5c3e40");53     }54     function Venus(){//金星355         DrawStart.call(this,0,-100,10,224.71,"#c4bbac","#1f1315");56     }57     function Earth(){//地球458         DrawStart.call(this,0,-150,10,365.224,"#78b1e8","#050c12");59     }60     function Mars(){//火星561         DrawStart.call(this,0,-200,10,686.98,"#cec9b6","#76422d");62     }63     function Jupiter(){//木星664         DrawStart.call(this,0,-250,10,4332.589,"#c0a48e","#322");65     }66     function Saturn(){//土星767         DrawStart.call(this,0,-300,10,10759.5,"#f7f9e3","#5c4533");68     }69     function Uranus(){//天王星870         DrawStart.call(this,0,-350,10,30799.95,"#a7e1e5","#19243a");71     }72     function Neptune(){//天王星973         DrawStart.call(this,0,-400,10,60152.95,"#0661b2","#1E3b73");74     }75 76     var s=new Sun();//177 78     var m=new Mercury();//279     var v=new Venus();//380     var e=new Earth();//481     var ma=new Mars();//582     var j=new Jupiter();//683     var sa=new Saturn();//784     var ur=new Uranus();//885     var ne=new Neptune();//986 87 setInterval(function(){88     cxt.clearRect(0,0,1000,1000);89     DrawTrack();90     s.draw();91     m.draw();92     v.draw();93     e.draw();94     ma.draw();95     j.draw();96     sa.draw();97     ur.draw();98     ne.draw();99 },10);