canvas 模拟的公转自转

图例1：

1.

图例2：

图例3：

图例4：

图例5:

/**
 * canvas 模拟的公转自转
 * by zxj
 * date:2014/01/02
 * mail:lchysh01@gmail.com
 * 
 * */	    
var $ORT = orbitalRotation = function(cfg){
		var cfg = cfg || {};
		if(cfg.canvasWidth == null){
			cfg.canvasWidth = 300;
		}
		if(cfg.canvasHeight == null){
			cfg.canvasHeight = 300;
		}
		if(cfg.taichiCount == null){
			cfg.taichiCount = 5;
		}
		if(cfg.radiusRate == null){
			cfg.radiusRate = 0.6;
		}
		if(cfg.radiusRate == 1){
		   cfg.radiusRate = 0.99999;
		}
		if(cfg.canvasId == null){
			cfg.canvasId = "orbitalRotationCanvas";
		}
		if(cfg.containerId == null){
			cfg.container = document.body;
		} else {
			cfg.container = document.getElementById(cfg.containerId);
		}
		cfg.sunRotationCounter = 1;
		var canvas = cfg.canvas = document.createElement("canvas");
		canvas.setAttribute('id', cfg.canvasId);
		canvas.setAttribute('style', 'background-color:red;margin:100px;');
		cfg.container.appendChild(canvas);
		if(canvas.getContext){
			canvas.setAttribute('width', cfg.canvasWidth);
			canvas.setAttribute('height', cfg.canvasHeight);
			cfg.ctx = canvas.getContext("2d");
		} else {
			alert("not surport canvas");
			return false;
		}
		
		for(var i in $ORT){
			if(typeof $ORT[i] =="function"){
				cfg[i] = $ORT[i];
			}
		}
		cfg.draw = cfg._draw;
		cfg.sunRadius = cfg._getSunRadius(); 
		return cfg;
};
$ORT._getSunRadius = function() {
	this.sunRadius = (this.canvasHeight*0.75-(this.taichiCount-1)*5)/(
		1
			+
		2
			*
		(
			(1- Math.pow(this.radiusRate, this.taichiCount-1))
				/
			(
				1-this.radiusRate
			)
		)
	)
	return this.sunRadius;
};
$ORT._draw = function(){
	if(this.ctx != null){
		this._animateTaichi();
	}
};
$ORT._animateTaichi = function(){
	var me = this;
	setInterval(function(){
		me._rotateTaichi();
	}, 20);
};
$ORT._rotateTaichi = function (){
	this.ctx.clearRect(-this.canvasWidth/2, -this.canvasHeight/2, this.canvasWidth*2, this.canvasHeight*2);
	this._taichi(this.ctx);
};
$ORT._drawArc = function (ctx,fillStyle, x,y,radius , startA, endA, isAntiClock){
	ctx.beginPath();
	ctx.arc(x,y,radius ,startA,endA, isAntiClock);
	ctx.fillStyle=fillStyle;
	ctx.closePath();
	ctx.fill();
};
$ORT._drawTaichi = function (ctx, cfg){
	var centerX = cfg.centerX;
	var centerY = cfg.centerY;
	var radius = cfg.radius;
	var arc = cfg.arc;
	if(arc){
		ctx.translate(centerX, centerY);
		ctx.rotate(arc);
		ctx.translate(-centerX, -centerY);
	}
	var grdWhite=ctx.createLinearGradient(this.canvasWidth,this.canvasHeight,0,0);
	grdWhite.addColorStop(0,"rgba(255,255,255,1)");
	grdWhite.addColorStop(1,"rgba(200,200,200, 1)");
	var grdBlack=ctx.createLinearGradient(0,0,this.canvasWidth,this.canvasHeight);
	grdBlack.addColorStop(0,"rgba(0,0,0,1)");
	grdBlack.addColorStop(1,"rgba(200,200,200, 1)");
	grdBlack = "black";
	grdWhite = "white";
	this._drawArc(ctx, grdWhite, centerX,centerY,            radius,    		0.5*Math.PI,1.5*Math.PI, true);
	this._drawArc(ctx, grdBlack, centerX,centerY,            radius,    		0.5*Math.PI,1.5*Math.PI, false);
	this._drawArc(ctx, grdWhite, centerX,centerY - radius/2, radius/2,  		0*Math.PI,2*Math.PI, false);
	this._drawArc(ctx, grdBlack, centerX,centerY + radius/2, radius/2,  		0*Math.PI,2*Math.PI, true);
	this._drawArc(ctx, grdWhite, centerX,centerY+radius/2,   radius/16,       0*Math.PI, 2*Math.PI, true);
	this._drawArc(ctx, grdBlack, centerX,centerY-radius/2,   radius/16,       0*Math.PI, 2*Math.PI, false);
};
$ORT._taichi = function (ctx){
	var radius  = this.sunRadius;
	var cfg = {
		satelliteArc:Math.PI/180*this.sunRotationCounter,
		arc:Math.PI/180*this.sunRotationCounter,
		radius:radius,
		centerX:this.canvasWidth/2,
		centerY:this.canvasHeight/2
	};	
	
	this._sunHalo(ctx, cfg);	
	ctx.save();			
	this._drawTaichi(ctx, cfg);
	ctx.restore();
	var parentCfg = cfg;
	var x,y;
	for(var i = 1; i < this.taichiCount-1; i++){
		 parentCfg = this._satelliteTaichi(ctx, parentCfg, i);				
	}
	this.sunRotationCounter++;
};
$ORT._satelliteTaichi = function (ctx, parentCfg, i){
	var revolutionArc;
	ctx.save();
	cfg = {};
	cfg.arc = Math.PI/180*this.sunRotationCounter*Math.sqrt(i);
	revolutionArc = parentCfg.satelliteArc + parentCfg.arc;
	cfg.satelliteArc = revolutionArc;
	cfg.radius = parentCfg.radius*this.radiusRate;
	x = parentCfg.centerX + (parentCfg.radius + cfg.radius+5)*Math.cos(revolutionArc);
	y = parentCfg.centerY + (parentCfg.radius + cfg.radius + 5)*Math.sin(revolutionArc);
	cfg.centerX = x;
	cfg.centerY = y;
	this._drawTaichi(ctx, cfg);
	ctx.restore();
	return cfg;
};
$ORT._sunHalo = function (ctx, cfg){
	ctx.beginPath();
	var gt = ctx.createLinearGradient(-this.canvasWidth/2, -this.canvasWidth/2, this.canvasWidth*2, this.canvasHeight*2);
	gt.addColorStop(0, 'rgba(255,255,255,1)');
	gt.addColorStop(0.40, 'rgba(222,232,250,1)');
	gt.addColorStop(0.60, 'rgba(8,27,48,1)');
	gt.addColorStop(1, 'rgba(0,0,0,1)');
	ctx.fillStyle= gt;
	ctx.fillRect(-this.canvasWidth/2, -this.canvasWidth/2, this.canvasWidth*2, this.canvasHeight*2);
	ctx.closePath();
	ctx.beginPath();
	ctx.arc(cfg.centerX,cfg.centerY, cfg.radius*2,0*Math.PI,2*Math.PI, true);
	gt = ctx.createRadialGradient(cfg.centerX,cfg.centerY, cfg.radius, cfg.centerX,cfg.centerY, cfg.radius*1.5);
	gt.addColorStop(0, 'rgba(222,232,250,1)');
	gt.addColorStop(0.5,'rgba(125,186,240,1)');
	gt.addColorStop(0.6,'rgba(71,142,204,1)');
	gt.addColorStop(1, 'rgba(4,80,145,1)');
	ctx.fillStyle=gt;
	ctx.fill();
	ctx.closePath();	
};