html5实现的canvas太阳系

努力的zhiyi 2014-12-10

效果:

html5实现的canvas太阳系
 代码:

<!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>

相关推荐