Html5 uses canvas to draw solar system effects, html5canvas

Html5 uses canvas to draw solar system effects, html5canvas
This article mainly introduces how html5 uses canvas to draw solar system effects. For more information, see

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

<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 <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 ){
// Plot the attributes required by the planet

// Coordinate point of the planet
This. x = x;
This. y = y;
// Radius of the planet
This. radius = radius;
// The Color of the planet (start color, end color)
This. sColor = sColor;
This. eColor = eColor;
// Create an empty gradient object
This. color = null;
This. time = 0;
// Public cycle
This. cycle = cycle;
This. draw = function (){
Cxt. save ();
Cxt. translate (500,500 );
// Set the 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;
}
} </P> <p> 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,-224.71, 10, "# c4bbac", "#1f1315 ");
}
Function Earth () {// 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,-4332.589, 10, 322, "# c0a48e ");
}
Function Saturn () {// Saturn 7
DrawStart. call (this, 0,-10759.5, 10, "# 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 );
DrawTrack ();
S. draw ();
M. draw ();
V. draw ();
E. draw ();
Ma. draw ();
J. draw ();
Sa. draw ();
Ur. draw ();
Ne. draw ();
}, 10 );