canvas 实现太阳系效果

一：创建画布

<canvas width="1000" height="1000" id="solar" style="background: #000000"></canvas>

二：实现功能

var solar = document.getElementById('solar');
var cxt = solar.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 = 'white';
cxt.stroke();
}
}

drawTrack();

function drawStar(x, y, radius, cycle, sColor, eColor) {
this.x = x;
this.y = y;
this.radius = radius;
this.cycle = cycle;
this.sColor = sColor;
this.eColor = eColor;
this.color = null;
this.time =0;
this.draw = function(){
cxt.save();
cxt.translate(500, 500);
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;
}
}

function Sun(){
drawStar.call(this, 0, 0, 20, 0, '#f00', '#f90');
}

function Mercury(){
drawStar.call(this, 0, -50, 10, 87.70, '#a69697', '#5c3e40');
}

function Venus(){
drawStar.call(this, 0, -100, 10, 224.701, '#c4bbac', '#1f1315');
}

function Earth(){
drawStar.call(this, 0, -150, 10, 365.224, '#78b1e8', '#050c12');
}

function Mars(){
drawStar.call(this, 0, -200, 10, 686.98, '#cec9b6', '#76422d');
}

function Jupiter(){
drawStar.call(this, 0, -250, 10, 4332.589, '#c0a48e', '#322222');
}

function Saturn(){
drawStar.call(this, 0, -300, 10, 10759.5, '#f7f9e3', '#5c4533');
}

function Uranus(){
drawStar.call(this, 0, -350, 10, 30799.095, '#a7e1e5', '#19243a');
}

function Neptune(){
drawStar.call(this, 0, -400, 10, 60152, '#0661b2', '#1e3b73');
}
var sun = new Sun();

var mercury = new Mercury();

var venus = new Venus();

var earth = new Earth();

var mars = new Mars();

var jupiter = new Jupiter();

var saturn = new Saturn();

var uranus = new Uranus();

var neptune = new Neptune();

function move(){
cxt.clearRect(0, 0, 1000, 1000);
drawTrack();
sun.draw();
mercury.draw();
venus.draw();
earth.draw();
mars.draw();
jupiter.draw();
saturn.draw();
uranus.draw();
neptune.draw();
}

setInterval(move, 20);