基于canvas的简易太阳系模型

最近闲下来，开始了HTML5的入门之旅。跟着某视频(避免广告嫌疑)做了两个简单的canvas例子。此处为简易太阳系模型实例。

PS: 例子为实验性例子，欢迎批判~~~~

一、实现逻辑

1、画出轨道，一共8个轨道(冥王星不算)

2、画出星体，含太阳共9个星体

3、循环调用1、2步，使星体动起来。

二、代码展示

1、效果图

基于canvas的简易太阳系模型
2、全部代码如下

a. 简单模式

<!DOCTYPE HTML>
<html>
 <head>
	<meta charset="gb2312">
  <title> Canvas-太阳系 </title>
 </head>
 <body>
  <canvas width="800" height="800" id="sunClass" style="background:black">您的浏览器不支持<code>canvas</code>标签！</canvas>
  <script>
	//获取画布DOM
	var dCanvas = document.getElementById('sunClass');
	//设置绘图环境.注意只能用小写“2d”
	var paper = dCanvas.getContext('2d');
	var BX=400,BY=400;
	var panletDef = 40;
	var colorArr = [["#f00","#f90"],["#A69697","#5C3E40"],["#C4BBAC","#1F1315"],["#78B1E8","#050C12"],["#CEC9B6","#76422D"],["#C0A48E","#322222"],["#F7F9E3","#5C4533"],["#A7E1E5","#19243A"],["#0661B2","#1E3B73"]];
	var timeUnit = 20;//时间基本数，毫秒  用于表示天
	var timer = 0;//计数器，表示循环了多少个时间单位timeUnit
	var scrollArr = [0,87.7,224.701,365.2422,686.98,4332.589,10759.5,30799.095,164.8*365];//太阳系各行星的公转系数。 单位为天

	//画图
	drawSunClass();
	//启动定时器
	window.setInterval(drawSunClass,timeUnit);

	/**
	*	绘制太阳系
	*
	**/
	function drawSunClass(){
		paper.clearRect(0,0,900,900);
		for(var i = 0; i<9; i++){
			//1. 画轨道
			drawTrack(paper,i);
			//2. 画星体
			drawCircleBall(paper,i,timer);
		}
		timer++;//计数器＋1
	};
	
	/**
	*	画轨道
	*@param _paper  HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取
	*@param order 次序，表示太阳系的行星序号。从太阳本身开始，越远序号越大。
	*
	**/
	function drawTrack(_paper,order){
		if(typeof order == 'undefined') order = 0;
		if(order > 0){
			_paper.beginPath();
			_paper.strokeStyle="#fff";
			_paper.arc(BX,BY,panletDef*(order),0,360,false);
			_paper.stroke();
			_paper.closePath();
		}
	}

	/**
	*	画星体
	*@param _paper  HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取
	*@param order 次序，表示太阳系的行星序号。从太阳本身开始，越远序号越大。
	*@param time 计数器，表示当前已过多少时间单位。
	*
	**/
	function drawCircleBall(_paper,order,time){
		if(typeof order == 'undefined') order = 0;
		if(typeof time == 'undefined') time = 0;
		var cirY = panletDef*order;
		_paper.save();
		_paper.translate(BX,BY);//重新设置(0,0)点的位置
		if(order != 0){
			_paper.rotate(time*2*Math.PI/scrollArr[order]);
		}
		_paper.beginPath();
		_paper.arc(0,cirY,10,0,360,false);
		//获取径向渐变对象
		var fillColor = _paper.createRadialGradient(0,cirY,0,0,cirY,10);
		fillColor.addColorStop(0,colorArr[order][0]);//指定渐变颜色
		fillColor.addColorStop(1,colorArr[order][1]);//指定渐变颜色
		_paper.fillStyle=fillColor;
		_paper.fill();
		_paper.closePath();
		_paper.restore();
	}
  </script>
 </body>
</html>

b. 对象模式

<!DOCTYPE HTML>
<html>
 <head>
	<meta charset="gb2312">
  <title> Canvas-太阳系--js对象模式 </title>
 </head>
 <body>
  <canvas width="800" height="800" id="sunClass" style="background:black">您的浏览器不支持<code>canvas</code>标签！</canvas>
  <script>
	//获取画布DOM
	var dCanvas = document.getElementById('sunClass');
	//设置绘图环境.注意只能用小写“2d”
	var paper = dCanvas.getContext('2d');
	var BX=400,BY=400;//定义中心圆点位置
	var panletDef = 40;//定义行星之间的距离
	var timeUnit = 20;//时间基本数，毫秒  用于表示天
	
	/**
	*	画轨道
	*@param _paper  HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取
	*@param order 次序，表示太阳系的行星序号。从太阳本身开始，越远序号越大。
	*
	**/
	function drawTrack(_paper,order){
		if(typeof order == 'undefined') order = 0;
		if(order > 0){
			_paper.beginPath();
			_paper.strokeStyle="#fff";
			_paper.arc(BX,BY,panletDef*(order),0,360,false);
			_paper.stroke();
			_paper.closePath();
		}
	}

	/**
	*	创建星体类
	*
	**/
	function Star(x,y,r,times,color){
		this.x = x;
		this.y = y;
		this.r = r;
		this.color = color;
		this.timer = 0;
		this.times = times;
		this.draw = function (_paper){
			_paper.save();
			_paper.translate(BX,BY);//重新设置(0,0)点的位置
			_paper.rotate(this.timer*2*Math.PI/times);
			
			_paper.beginPath();
			_paper.arc(this.x,this.y,this.r,0,360,false);
			//获取径向渐变对象
			this.fillColor = _paper.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
			this.fillColor.addColorStop(0,this.color[0]);//指定渐变颜色
			this.fillColor.addColorStop(1,this.color[1]);//指定渐变颜色
			_paper.fillStyle=this.fillColor;
			_paper.fill();
			_paper.closePath();
			_paper.restore();
			this.timer++;
		}

	}

	/**
	*	创建太阳构造函数
	*
	**/
	var Sun = function (){
		Star.call(this,0,0,10,0,["#f00","#f90"]);
	}
	/**
	*	创建水星构造函数
	*
	**/
	var Mercury = function (){
		Star.call(this,0,-40,10,87.7,["#A69697","#5C3E40"]);
	}
	/**
	*	创建金星构造函数
	*
	**/
	var Venus = function (){
		Star.call(this,0,-80,10,224.701,["#C4BBAC","#1F1315"]);
	}
	/**
	*	创建地球构造函数
	*
	**/
	var Earth = function (){
		Star.call(this,0,-120,10,365.2422,["#78B1E8","#050C12"]);
	}
	/**
	*	创建火星构造函数
	*
	**/
	var Mars = function (){
		Star.call(this,0,-160,10,686.98,["#CEC9B6","#76422D"]);
	}
	/**
	*	创建木星构造函数
	*
	**/
	var Jupiter = function (){
		Star.call(this,0,-200,10,4332.589,["#C0A48E","#322222"]);
	}
	/**
	*	创建土星构造函数
	*
	**/
	var Saturn = function (){
		Star.call(this,0,-240,10,10759.5,["#F7F9E3","#5C4533"]);
	}
	/**
	*	创建天王星构造函数
	*
	**/
	var Uranus = function (){
		Star.call(this,0,-280,10,30799.095,["#A7E1E5","#19243A"]);
	}
	/**
	*	创建海王星构造函数
	*
	**/
	var Neptune = function (){
		Star.call(this,0,-320,10,60152,["#0661B2","#1E3B73"]);
	}

	//初始化各行星对象
	var sun = new Sun();
	var mercury = new Mercury();
	var venus = new Venus();
	var earth = new Earth();
	var mars = new Mars();
	var jupiter = new Jupiter();
	var saturn = new Saturn();
	var uranus = new Uranus();
	var neptune = new Neptune();

	/**
	*	绘制太阳系
	*
	**/
	function drawSunClass(){
		//清空画布
		paper.clearRect(0,0,900,900);
		for(var i = 0; i<9; i++){
			//1. 画轨道
			drawTrack(paper,i);
		}
		//2. 画星体
		sun.draw(paper);
		mercury.draw(paper);
		venus.draw(paper);
		earth.draw(paper);
		mars.draw(paper);
		jupiter.draw(paper);
		saturn.draw(paper);
		uranus.draw(paper);
		neptune.draw(paper);
	};
	
	//第一次绘制星图
	drawSunClass();
	//启动定时器,循环绘制星图
	window.setInterval(drawSunClass,timeUnit);
  </script>
 </body>
</html>

三、后记

1、代码在FireFox 32.0.3上测试有效。

基于canvas的简易太阳系模型

相关推荐