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(){//太阳1
49 DrawStart.call(this,0,0,20,0,"#f00","#f90");
50 }
51 function Mercury(){//水星2
52 DrawStart.call(this,0,-50,10,87.70,"#A69697","#5c3e40");
53 }
54 function Venus(){//金星3
55 DrawStart.call(this,0,-100,10,224.71,"#c4bbac","#1f1315");
56 }
57 function Earth(){//地球4
58 DrawStart.call(this,0,-150,10,365.224,"#78b1e8","#050c12");
59 }
60 function Mars(){//火星5
61 DrawStart.call(this,0,-200,10,686.98,"#cec9b6","#76422d");
62 }
63 function Jupiter(){//木星6
64 DrawStart.call(this,0,-250,10,4332.589,"#c0a48e","#322");
65 }
66 function Saturn(){//土星7
67 DrawStart.call(this,0,-300,10,10759.5,"#f7f9e3","#5c4533");
68 }
69 function Uranus(){//天王星8
70 DrawStart.call(this,0,-350,10,30799.95,"#a7e1e5","#19243a");
71 }
72 function Neptune(){//天王星9
73 DrawStart.call(this,0,-400,10,60152.95,"#0661b2","#1E3b73");
74 }
75
76 var s=new Sun();//1
77
78 var m=new Mercury();//2
79 var v=new Venus();//3
80 var e=new Earth();//4
81 var ma=new Mars();//5
82 var j=new Jupiter();//6
83 var sa=new Saturn();//7
84 var ur=new Uranus();//8
85 var ne=new Neptune();//9
86
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);
