HTML5 uses canvas to draw solar system effects

Planet	Variable name	Revolution Period	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

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

The

code is as follows:


var Canvas=document.getelementbyid ("Canvas");


var cxt=canvas.getcontext ("2d");





function Drawtrack () {


for (Var i=0;i&lt;8;i++) {


Cxt.beginpath ();


Cxt.arc (500,500, (i+1) *50,0,360,false);


Cxt.closepath ();


cxt.strokestyle= "#fff";


Cxt.stroke ();


}


}


function Drawstart (x,y,radius,cycle,scolor,ecolor) {


//What are the attributes required to draw the planet





//Planet coordinates point


this.x=x;


this.y=y;


//Planet's radius


This.radius=radius;


//Planet Color (start color, end color)


This.scolor=scolor;


This.ecolor=ecolor;


//Create a gradient color empty object


This.color=null;


this.time=0;


//Public cycle


this.cycle=cycle;


this.draw=function () {


Cxt.save ();


cxt.translate (500,500);


//Set rotation angle


cxt.rotate (this.time*360/this.cycle*math.pi/180);


Cxt.beginpath ();


Cxt.arc (This.x,this.y,this.radius,0,360,false);


Cxt.closepath ();


this.color=cxt.createradialgradient (This.x,this.y,0,this.x,this.y,this.radius);


This.color.addColorStop (0,this.scolor);


this.color.addColorStop (1,this.ecolor);


Cxt.fillstyle=this.color;


Cxt.fill ();


Cxt.restore ();


this.time+=1;


}


}&lt;/p&gt; &lt;p&gt; function Sun () {//Sun 1


Drawstart.call (this,0,0,20,0, "#f00", "#f90");


}


function Mercury () {//Mercury 2


Drawstart.call (this,0,-50,10,87.70, "#A69697", "#5c3e40");


}


function Venus () {//Venus 3


Drawstart.call (this,0,-100,10,224.71, "#c4bbac", "#1f1315");


}


function Earth () {//4


Drawstart.call (this,0,-150,10,365.224, "#78b1e8", "#050c12");


}


function Mars () {//Mars 5


Drawstart.call (this,0,-200,10,686.98, "#cec9b6", "#76422d");


}


function Jupiter () {//Jupiter 6


Drawstart.call (this,0,-250,10,4332.589, "#c0a48e", "#322");


}


function Saturn () {//Saturn 7


Drawstart.call (this,0,-300,10,10759.5, "#f7f9e3", "#5c4533");


}


function Uranus () {//URANUS 8


Drawstart.call (this,0,-350,10,30799.95, "#a7e1e5", "#19243a");


}


function Neptune () {//Uranus 9


Drawstart.call (this,0,-400,10,60152.95, "#0661b2", "#1E3b73");


}





var s=new Sun ();//1





var m=new Mercury ();//2


var v=new Venus ();//3


var e=new earth ();//4


var ma=new Mars ();//5


var j=new Jupiter ();//6


var sa=new Saturn ();//7


var ur=new uranus ();//8


var ne=new Neptune ();//9





setinterval (function () {


Cxt.clearrect (0,0,1000,1000);


Drawtrack ();


S.draw ();


M.draw ();


V.draw ();


E.draw ();


Ma.draw ();


J.draw ();


Sa.draw ();


Ur.draw ();


Ne.draw ();


},10);