HTML画布太阳代码,html5实现的canvas太阳系

效果：

代码：

太阳系

您的浏览器不支持canvas标签

var cxt = document.getElementById("canvas").getContext("2d");

//画太阳和轨道

function drawTrack(){

cxt.beginPath();

cxt.arc(500,500,20,0,Math.PI*2,false);

cxt.closePath();

var sunColor = cxt.createRadialGradient(500,500,0,500,500,20);

sunColor.addColorStop(0,"#f00");

sunColor.addColorStop(1,"#f90");

cxt.fillStyle=sunColor;

cxt.fill();

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

cxt.beginPath();

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

cxt.closePath();

cxt.strokeStyle="#fff"

cxt.stroke();

}

}

drawTrack();

//行星

function Star(x,y,r,clcye,sColor,eColor){

cxt.save();

cxt.translate(500,500);

cxt.rotate(time*Math.PI*2/clcye);

cxt.beginPath();

cxt.arc(x,y,r,0,Math.PI*2);

cxt.closePath();

var starColor = cxt.createRadialGradient(x,y,0,x,y,r);

starColor.addColorStop(0,sColor);

starColor.addColorStop(1,eColor);

cxt.fillStyle=starColor;

cxt.fill();

cxt.restore();

}

var time = 0;

function drawStar(){

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

drawTrack();

Star(0,-50,10,87.70,"#A69697","#5C3E40");//水星

Star(0,-100,10,224.701,"#C4BBAC","#1F1315");//金星

Star(0,-150,10,365.2422,"#78B1E8","#050C12");//地球

Star(0,-200,10,686.98,"#CEC9B6","#76422D");//火星

Star(0,-250,10,4332.589,"#C0A48E","#322222");//木星

Star(0,-300,10,10759.5,"#F7F9E3","#5C4533");//土星

Star(0,-350,10,30799.095,"#A7E1E5","#19243A");//天王星

Star(0,-400,10,60152,"#0661B2","#1E3B73");//海王星

time += 1;

}

setInterval(drawStar,10);