Effects of the canvas Solar System

 

 

Planet	Variable name	Public transfer cycle	Light Color	Dark color
Mercury	Mercury	87.70	# A69697	#5c3e40
Venus	Venus	224.701.70	# C4bbac	#1f1315
Earth	Earth	365.2422	#78b1e8	#050c12
Mars	Mars	686.98	# Cec9b6	# 76422d
Jupiter	Jupiter	4332.589	# C0a48e	#322
Saturn	Saturn	10759.95	# F7f9e3	#5c4553
Uranus	Uranus	30799.095	# A7e115	# 19243a
Neptune	Neptune	60152.95	#0661b2	#1e3b73

 

 

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 // map the attributes required by the planet. 15 16 // coordinate point of the planet. 17 this. X = x; 18 this. y = y; 19 // the radius of the planet is 20 this. radius = radius; 21 // the color of the planet (start color, end color) 22 This. scolor = scolor; 23 This. ecolor = ecolor; 24 // create an empty gradient object 25 this. color = NULL; 26 This. time = 0; 27 // public period 28 This. cycle = cycle; 29 This. draw = function () {30 cxt. save (); 31 cxt. translate (500,500); 32 // sets the Rotation Angle of 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 () {// Sunday 149 drawstart. call (this, 0, 0, 20, 0, "# f00", "# f90"); 50} 51 function mercury () {// mercury 252 drawstart. call (this, 0,-50, 10, 87.70, "# a69697", "#5c3e40"); 53} 54 function Venus () {// Venus 355 drawstart. call (this, 0,-224.71, 10, 458, "# c4bbac", "#1f1315"); 56} 57 function Earth () {// Earth drawstart. call (this, 0,-365.224, 10, 561, "#78b1e8", "#050c12"); 59} 60 function Mars () {// Mars drawstart. call (this, 0,-686.98, 10, 664, "# cec9b6", "# 76422d"); 62} 63 function Jupiter () {// Jupiter drawstart. call (this, 0,-4332.589, 10, 322, "# c0a48e", "#767"); 65} 66 function Saturn () {// Saturn drawstart. call (this, 0,-10759.5, 10, 870, "# f7f9e3", "#5c4533"); 68} 69 function Uranus () {// Uranus drawstart. call (this, 0,-30799.95, 10, 973, "# a7e1e5", "# 19243a"); 71} 72 function Neptune () {// Uranus drawstart. call (this, 0,-60152.95, 10, "#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 );