一:创建画布
<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);