1 <!DOCTYPE html>
2 <html lang='zh-cn'>
3 <head>
4 <title>Insert you title</title>
5 <meta name='description' content='this is my page'>
6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
7 <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
10 <style type='text/css'>
11 html,body,canvas {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 height: 100%
17 }
18
19 body {
20 background: #000;
21 }
22
23 #can {
24 background: #000; display: block; margin: 0 auto; border-radius: 2px;
25 }
26 </style>
27 <script type='text/javascript'>
28 $( function(){
29 var can = $( '#can' ).get( 0 );
30 var oCan = can.getContext( '2d' );
31 var w = can.width;
32 var h = can.height;
33 oCan.translate( w / 2 , h / 2 );
34 function DrawTrack(){
35 this.draw = function(){
36 oCan.save();
37 for( var i = 0 ; i < 8 ; i++ ){
38 oCan.beginPath();
39 oCan.strokeStyle = '#FFF';
40 oCan.lineWidth = 1;
41 oCan.arc( 0 , 0 , ( i + 1 ) * 50 , 0 * Math.PI / 180 , 360 * Math.PI / 180 ,
42 false );
43 oCan.stroke();
44 oCan.closePath();
45 }
46 oCan.restore;
47 }
48 }
49 function DrawStar( parm ){
50 parm = parm || {};
51 this.x = parm.x;
52 this.y = parm.y;
53 this.circle = parm.circle;
54 this.time = parm.time;
55 this.sColor = parm.sColor;
56 this.eColor = parm.eColor;
57 this.crg = null;
58 this.date = 0;
59 this.draw = function(){
60 oCan.save(); /* 保存画布信息异常重要,非常重要 */
61 oCan.beginPath();
62 oCan.rotate( this.date * ( 360 / this.time ) * Math.PI / 180 );
63 this.crg = oCan.createRadialGradient( this.x , this.y , 2 , this.x , this.y ,
64 this.circle );
65 this.crg.addColorStop( .5 , this.sColor );
66 this.crg.addColorStop( 1 , this.eColor );
67 oCan.fillStyle = this.crg;
68 oCan.arc( this.x , this.y , this.circle , 0 , 2 * Math.PI , false );
69 oCan.fill();
70 oCan.closePath();
71 oCan.restore();
72 this.date++;
73 };
74 }
75 var track = new DrawTrack();
76 var sun = new DrawStar( {
77 'x' : 0 ,
78 'y' : 0 ,
79 'circle' : 30 ,
80 'time' : 0 , /* 公转周期 */
81 'sColor' : '#F00' ,
82 'eColor' : '#FF0' ,
83 } );
84 var mercury = new DrawStar( {
85 'x' : 0 ,
86 'y' : -50 ,
87 'circle' : 10 ,
88 'time' : 87 ,
89 'sColor' : '#9C9' ,
90 'eColor' : '#F66' ,
91 } );
92 var venus = new DrawStar( {
93 'x' : 0 ,
94 'y' : -100 ,
95 'circle' : 20 ,
96 'time' : 225 ,
97 'sColor' : '#9C3' ,
98 'eColor' : '#936' ,
99 } );
100 var earth = new DrawStar( {
101 'x' : 0 ,
102 'y' : -150 ,
103 'circle' : 20 ,
104 'time' : 365 ,
105 'sColor' : '#F93' ,
106 'eColor' : '#CCC' ,
107 } );
108 var mars = new DrawStar( {
109 'x' : 0 ,
110 'y' : -200 ,
111 'circle' : 10 ,
112 'time' : 687 ,
113 'sColor' : '#963' ,
114 'eColor' : '#C30' ,
115 } );
116 var jupiter = new DrawStar( {
117 'x' : 0 ,
118 'y' : -250 ,
119 'circle' : 20 ,
120 'time' : 4333 ,
121 'sColor' : '#09C' ,
122 'eColor' : '#0F0' ,
123 } );
124 var saturn = new DrawStar( {
125 'x' : 0 ,
126 'y' : -300 ,
127 'circle' : 30 ,
128 'time' : 10760 ,
129 'sColor' : '#609' ,
130 'eColor' : '#666' ,
131 } );
132 var uranus = new DrawStar( {
133 'x' : 0 ,
134 'y' : -350 ,
135 'circle' : 20 ,
136 'time' : 30800 ,
137 'sColor' : '#F30' ,
138 'eColor' : '#060' ,
139 } );
140 var neptune = new DrawStar( {
141 'x' : 0 ,
142 'y' : -400 ,
143 'circle' : 10 ,
144 'time' : 60152 ,
145 'sColor' : '#F00' ,
146 'eColor' : '#FF0' ,
147 } );
148 function drawStar(){
149 oCan.clearRect( -w / 2 , -h / 2 , w , h );
150 track.draw();
151 sun.draw();
152 mercury.draw();
153 venus.draw();
154 earth.draw();
155 mars.draw();
156 jupiter.draw();
157 saturn.draw();
158 uranus.draw();
159 neptune.draw();
160 }
161 drawStar();
162 setInterval( drawStar , 50 );
163 } );
164 </script>
165 </head>
166 <body>
167 <canvas id='can' width='850' height='850'>检测到您的浏览器版本过低请升级您的浏览器版本,以获取更好的使用体验...</canvas>
168 </body>
169 </html>