效果:
代码:
<!doctype html>
<html>
<head>
<title>太阳系</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background-color:#000">
您的浏览器不支持canvas标签
</canvas>
<script>
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);
</script>
</body>
</html>