太阳系运转小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>-->
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000" style="background: #000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//时间参数,单位为天
function drawTrack() {
for(var i=0;i<=8;i++){
ctx.beginPath();
ctx.arc(500,500,i*30,0,360,false);
ctx.closePath();
ctx.strokeStyle = "#fff";
ctx.stroke();
}
}
function star(x,y,radius,cycle,sColor,eColor){
this.x = x;
this.y = y;
this.radius = radius;
this.cycle = cycle;
this.color = null;
this.sColor = sColor;
this.eColor = eColor;
this.time = 0;
this.draw = function(){
ctx.save();
ctx.translate(500,500);
ctx.rotate(this.time*(360/this.cycle)*Math.PI/180);
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,360,false);
ctx.closePath();
this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
this.color.addColorStop(0,this.sColor);
this.color.addColorStop(1,this.eColor);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
this.time+=1;
}
}
drawTrack();
var sun = new star(0,0,10,0,"#f00","#f90");
var earth = new star(0,-30,5,87.70,"#a69697","#5c3e40");
var gold = new star(0,-90,5,4332,"#f7f9e3","#5c4533");
function move(){
ctx.clearRect(0,0,1000,1000);
drawTrack();
sun.draw();
gold.draw();
earth.draw();
}
setInterval(move,10);
</script>
</body>
</html>
