图例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();
};