`
jsamson
  • 浏览: 117569 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
HTML5例子 html5例子 基于canvas的简易太阳系模型
<!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>
Global site tag (gtag.js) - Google Analytics