canvas之太阳系效果

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);

canvas之太阳系效果,布布扣,bubuko.com