Html5 Canvas 运动的太阳系的例子

资料来源：网络整理时间：2023/2/14 0:19:17 共计：3608 浏览

本文介绍一个我在学校 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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jquery中ajax使用error调试错误的方法 | ·下一条：HTML5 Loading加载动画