HTML5绘制太阳系

效果图：

 

var sunarea = document.getElementByIdx_x('sunarea');

var cxt = sunarea.getContext('2d');

function draw(){

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

cxt.strokeStyle='white';

cxt.beginPath();

cxt.arc(500,500,(i+1) * 60, 0, Math.PI * 2, false);

cxt.closePath();

cxt.stroke();

    }

}

 function star (x,y,rad,cycle,scolor,ecolor) { 

this.x=x;

this.y=y;

this.rad=rad;

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.rad,0,Math.PI*2,false);

cxt.closePath();

            var color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.rad);

color.addColorStop(0,scolor);

color.addColorStop(1,ecolor);

cxt.fillStyle = color;

cxt.fill();

   cxt.restore();

this.time++;

       };

}

function Sun(){

star.call(this,0,0,20,0,'#F00','#F90');

}

function Earth(){

star.call(this,0,60*3,10,365,'#78B1E8','#050C12');

}

var sun=new Sun();

var earth=new Earth();

function bulid (){

cxt.clearRect(0,0,1000,1000);

draw();

sun.draw();

earth.draw();

}

setInterval(bulid,10);

代码部分只给出了太阳和地球，按照下面的图片中数据更改相应的颜色，半径等，可得出完整的太阳系