Html5 Canvas 运动的太阳系的例子

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

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

　HTML5 Loading加载动画

jquery中ajax使用error调试错误的方法　

项目在运行npm install 出现Failed at the canvas@2.8.0 install script错误 html5和css3制作switch开关控件 div或元素垂直居中对齐，Css3在html5中实现，流式display:flex布局 cron表达式详解，cron表达式写法，cron表达式例子 spring+spring mvc+JdbcTemplate 入门小例子 C#开发FFMPEG例子(API方式) FFmpeg拉取RTMP流并播放根据经纬度绘制坐标点相对位置（分别用php和html5实现） $.ajax({})方法success，error，complete，beforeSend使用例子及解释微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas) 微信小程序例子-保存图片到手机相册

柏港建站平台

柏港 HTML5

Html5 Canvas 运动的太阳系的例子

柏港为您推荐了一些相关资讯