隐藏

Html5 Canvas 运动的太阳系的例子

发布:2016/1/14 12:51:30作者:管理员 来源:本站 浏览次数:1017

本文介绍一个我在学校 Canvas 的过程中找到的一个不错的 2D 动画,模拟的太阳系的运动图,当然一张图片都没用,效果略渣,但还是很有参考价值的。

CSS 仅仅只是去掉了浏览器默认给加上的边距,给背景改成了黑色,剩下的全部用 Canvas 完成。

PS:其实这样的动画纯 CSS 完成也不算难,这里主要介绍 Canvas


<!DOCTYPE html>
< html>
< head>
 <meta charset="utf-8"/>
 <title>太阳系 | 斌果博客</title>
 <style type="text/css">
  body{background:#000;}canvas{margin:0 auto;display:block;background:#000;}
 </style>
< /head>
< body>
< canvas id="canvas" width="600" height="600"></canvas>
< script type="text/javascript">
 var suns = document.getElementById('canvas');
 var obj = suns.getContext('2d');
 
 //画四条轨道 drawTrack()
 function drawTrack(){
  for(var i=0;i<4;i++){
   obj.beginPath();
   obj.arc(300,300,(i+1)*70,0,360,false);
   obj.closePath();
   obj.strokeStyle="#ccc";
   obj.stroke();
  }
 }
 
 //画球 www.111cn.net
 var time=0;
 //星球方法
 function Star(x,y,r,sColor,eColor,cycle){
  this.x=x;
  this.y=y;
  this.r=r;
  this.sColor=sColor;
  this.eColor=eColor;
  this.cycle=cycle;
  this.draw=function(){
   obj.save();
   obj.translate(300,300);
   obj.rotate(time*360/this.cycle*Math.PI/180);
   obj.beginPath();
   obj.arc(this.x,this.y,this.r,0,360,false);
   obj.closePath();
   var color = obj.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
   color.addColorStop(0,sColor);
   color.addColorStop(1,eColor);
   obj.fillStyle=color;
   obj.fill();
   obj.restore();
   time++;
  }
 }
 //-----------------------------------------------
 function Sun(){ //创建太阳构造方法
  Star.call(this,0,0,50,"#f00","#f90",0);
 }
 var sun=new Sun(); //创建太阳实例
 //-----------------------------------------------
 function Mercury(){ //创建水星构造方法
  Star.call(this,0,-70,10,"#A69697","#5C3E40",87.70);
 }
 var sx=new Mercury(); //创建水星实例
 //-----------------------------------------------
 function Venus(){ //创建金星构造方法
  Star.call(this,0,-140,30,"#C4BBAC","#1F1315",224.701);
 }
 var jx=new Venus(); //创建金星实例
 //-----------------------------------------------
 function Earth(){ //创建地球构造方法
  Star.call(this,0,-210,25,"#78B1E8","#050C12",365.2422);
 }
 var dq=new Earth(); //创建地球实例
 //-----------------------------------------------
 function Mars(){ //创建火星构造方法
  Star.call(this,0,-280,10,"#CEC9B6","#76422D",686.98);
 }
 var hx=new Mars(); //创建火星实例
 
 //动起来
 function move(){
  obj.clearRect(0,0,600,600);
  drawTrack();
  sun.draw();
  sx.draw();
  jx.draw();
  dq.draw();
  hx.draw();
 }
 move();
 setInterval("move()",100);
< /script>
< /body>
< /html>