html5实现太阳系转动效果

基本信息

源码名称：html5实现太阳系转动效果

源码大小：3.24KB

文件格式：.html

开发语言：CSS

更新时间：2016-01-08

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!doctype html>
<html>
	<head>
		<title>canvas太阳系</title>
		<meta charset='utf-8'>
	</head>
	<body>
		<canvas width='1000' height='1000' style='background:#000' id='canvas'>
			您的浏览器不支持HTML5 canvas,无法查看canvas效果
		</canvas>

		<script type="text/javascript">
			//获取canvas绘图环境
			var context = document.getElementById('canvas').getContext('2d');
			var time = 0;
			//星球轨道
			function drawTrack(){
				for(var i = 0; i < 8; i  ){
					//开始路径
					context.beginPath();
					context.arc(500,500,(i 1)*50,0,360,false);
					//关闭路径
					context.closePath();
					context.strokeStyle = '#fff';
					context.stroke();
				}
			}
			//执行以下此函数，画出各星球的轨道
			drawTrack();

			//星球  星球对象的构造方法 实例化后能画出所有的星球
			function Star(x,y,radius,sColor,eColor,cycle){
			//星球需要的哪些属性
				//星球的坐标点
				this.x = x;
				this.y = y;
				//星球的半径
				this.radius = radius;
				//星球的颜色
				this.sColor = sColor;
				this.eColor = eColor;
				//公转周期
				this.cycle = cycle;

				//绘画出星球
				this.draw = function(){  //异次元空间进行绘画
					context.save();
					//重设0,0坐标点
					context.translate(500,500);
					//设置旋转角度
					context.rotate(time*360/this.cycle*Math.PI/180);

					context.beginPath();
					context.arc(this.x,this.y,this.radius,0,360,false);
					context.closePath();
					//星球的填充色(径向渐变 开始色和结束色)
					this.color = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
					this.color.addColorStop(0,this.sColor);
					this.color.addColorStop(1,this.eColor);
					context.fillStyle = this.color;
					context.fill();
					context.restore();

					time  =1;
				}
				
			}

			//各星球构造方法 从star中继承
			function Sun(){
				Star.call(this,0,0,20,'#f00','#f90',0);
			}
			function Mercury(){
				Star.call(this,0,-50,10,'#A69697','#5C3E40',87.70);
			}
			function Venus(){
				Star.call(this,0,-100,10,'#C4BBAC','#1F1315',224.701);
			}
			function Earth(){
				Star.call(this,0,-150,10,'#78B1E8','#050C12',365.2422);
			}
			function Mars(){
				Star.call(this,0,-200,10,'#CEC9B6','#76422D',686.98);
			}
			function Jupiter(){
				Star.call(this,0,-250,10,'#C0A48E','#322222',4332.589);
			}
			function Saturn(){
				Star.call(this,0,-300,10,'#F7F9E3','#5C4533',10759.5);
			}
			function Uranus(){
				Star.call(this,0,-350,10,'#A7E1E5','#19243A',30799.095);
			}
			function Neptune(){
				Star.call(this,0,-400,10,'#0661B2','#1E3B73',164.8*365);
			}

			//各星球对象的实例化
			var sun = new Sun();
			var water = new Mercury();
			var gold = new Venus();
			var diqiu = new Earth();
			var fire = new Mars();
			var wood = new Jupiter();
			var soil = new Saturn();
			var sky = new Uranus();
			var sea = new Neptune();

			function move(){
				//清除画布
				context.clearRect(0,0,1000,1000);
				//重新绘制一遍轨道
				drawTrack();

				sun.draw();
				water.draw();
				gold.draw();
				diqiu.draw();
				fire.draw();
				wood.draw();
				soil.draw();
				sky.draw();
				sea.draw();
			}
			
			//星球围绕太阳运动起来
			setInterval(move,100);
		</script>
	</body>
</html>