[HTML5代码]利用canvas标签结合js画太阳系

2014-05-07 20:12:26 -0400

代码如下:

<!doctype html>
<html>
	<head><meta charset=utf-8></head>
	<body>
		<canvas id="canvas" width="300" height="300" style="background:#000">
			您的浏览器不支持canvas标签，无法查看太阳系特效！
		</canvas>
		<script>
			//设置2d绘图环境
			var cxt=document.getElementById('canvas').getContext('2d');
			
			//轨道
			function drawTrack(){
				for(var i=0;i<8;i++){
					cxt.beginPath();
					cxt.arc(150,150,(i+1)*15,0,360,false);
					cxt.closePath();
					//设置笔触的颜色
					cxt.strokeStyle="#fff";
					cxt.stroke();
				}
			
			}
			drawTrack();
			//星球
			function Star(x,y,radius,cycle,sColor,eColor){
				//画出星球需要哪些属性
				//星球的坐标点
				this.x=x;
				this.y=y;
				//星球的半径
				this.radius=radius;
				//公转周期
				this.cycle=cycle;
				//星球的颜色(开始色,结束色)
				this.sColor=sColor;
				this.eColor=eColor;
				//新建一个渐变颜色空对象
				this.color=null;
				//设置一个计时器
				this.time=0;
				this.draw=function(){
					//保存之前的画布内容
					cxt.save();
					//重置0,0坐标点
					cxt.translate(150,150);
					//设置旋转角度
					cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
					//画星球
					cxt.beginPath();
					cxt.arc(this.x,this.y,this.radius,0,360,false);
					cxt.closePath();
					//设置星球的填充颜色
					//新建渐变对象
					this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
					//设置渐变效果
					this.color.addColorStop(0,this.sColor);//渐变开始点和颜色
					this.color.addColorStop(1,this.eColor);//渐变结束点和颜色
					cxt.fillStyle=this.color;//将渐变对象复制给填充画笔
					//填充星球
					cxt.fill();
					
					//恢复之前保存的画布内容
					cxt.restore();
					//执行完毕之后时间增加
					this.time+=1;
				}
			}
			
			//创建一个太阳对象的构造函数
			function Sun(){
				Star.call(this,0,0,7,0,"#F00","#f90");
			}
			//创建一个水星的对象构造方法
			function Mercury(){
				Star.call(this,0,-15,4,87.70,"#A69697","#5C3E40");
			}
			//创建一个金星的对象构造方法
			function Venus(){
				Star.call(this,0,-30,4,224.701,"#C4BBAC","#1F1315");
			}
			//创建一个地球的对象构造方法

注:为了便于手机查看此特效，本人已对代码做了一些适当的修改，如果你用的是PC，那么请点击下面附件查看，效果会更好。
使用前请仔细阅读里面的说明。

sunsystem.html (3.62 KiB) | Meta

下面是效果:看…走你～

本代码由lamp兄弟连的丛浩老师编写

«Newer Older»

----Comments(1)----
csngmap (@csngmap) | @ at 2014-05-07 21:03:
转了，谢谢

Back to home

Subscribe | Register | Login | N