html5 制作太阳系,html5做的太阳系

效果图：

源代码：

你的浏览器不支持canvas

var canvas=document.getElementById("canvas");

var cxt=canvas.getContext(‘2d‘);

//轨道

function drawTrack(){

for(var i=0;i<8;i++){

cxt.beginPath();

cxt.strokeStyle="white";

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

cxt.stroke();

cxt.closePath();

}

}

drawTrack();

//星球

function Star(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();

//重置0.0坐标点

cxt.translate(500,500);

//设置旋转角度

cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);

cxt.beginPath();

cxt.strokeStyle="white";

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

//设置星球颜色

//设置渐变颜色

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.closePath();

cxt.fill();

cxt.restore();

this.time+=1;

}

}

//画星球

function Sun(){

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

}

function Mercury(){

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

}

function Venus(){

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

}

function Earth(){

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

}

function Mars(){

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

}

function Jupiter(){

Star.call(this,0,-250,10,686.98,"#c0a48e","#322222");

}

function Satrun(){

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

}

function Uranus(){

Star.call(this,0,-350,10,30799.095,"#A7e1e5","#19243a");

}

function Neptune(){

Star.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 Satrun=new Satrun();

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();

Satrun.draw();

Uranus.draw();

Neptune.draw();

}

//使各星球进行运动

setInterval( move,10);

原文：http://www.cnblogs.com/cjh1/p/6617676.html