前端特效03:HTML5画布模拟生成3D的舰队飞行效果

今天开始~小编将与大家分享一系列的web前端特效荟萃,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~





第三期,给大家分享一个HTML5画布模拟生成3D的舰队飞行效果,这个代码将使用2D的绘制来模拟3D的飞行效果,使用3D坐标转换2D坐标,并且定时清除图形并且绘制非常图片生成最后效果。相关代码如下:


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cloth</title>
  <style>
   body {
  overflow: hidden;
         }
  canvas {
  width: 100%;
  height: 100%;
         }
    
  </style>
</head>
<body>
<canvas id="gbcanvas" width="600" height="300">不支持HTML5画布</canvas>
  <script>
    /*画布JS*/
var fov = 100, //定义3D坐标转2D坐标比率
  SCREEN_WIDTH = 600,
  SCREEN_HEIGHT = 300,
  HALF_WIDTH = SCREEN_WIDTH/2,
  HALF_HEIGHT = SCREEN_HEIGHT/2,
  numSpaceship = 100;
  
//飞船图片
var anim_img = new Image();

anim_img.src = 'http://www.gbtags.com/gb/networks/uploads/de6da3dc-5924-4a2d-9e47-718a9ef43d6b/fighter3.png';

//获取画布上下文
var canvas = document.getElementById('gbcanvas');
var c = canvas.getContext('2d');

/* 绘制画布飞船图形方法,参数为3D坐标:数据格式为一个数组 */
function draw3Din2D(point3d){
  x3d = point3d[0],
  y3d = point3d[1],
  z3d = point3d[2];
  
  //定义缩放比率
  var scale = fov/(fov+z3d);
  
  //获取对应2d画布中坐标
  var x2d = (x3d*scale) + HALF_WIDTH;
  var y2d = (y3d * scale)  + HALF_HEIGHT;
  
  //绘制图片
  c.drawImage(anim_img, x2d, y2d, 5*scale, 5*scale);
  
}

var points = [];
//生成随机的飞船
function generateSpaceship(){
  for (i=0; i<numSpaceship; i++){
    var point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
    points.push(point);
  }
}

//清除并且绘制飞船
function render(){
  //清除画布上所有的图形
  c.fillStyle="rgb(0,0,0)";
  c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
  
  for (var i=0;i<numSpaceship;i++){
    point3d = points[i];
    
    z3d = point3d[2];
    
    z3d -=2 ; //每次缩减,生成新的z轴坐标位置
    
    if(z3d<-fov) z3d += 200; //超过一定数量,则生成反向坐标
    
    point3d[2] = z3d;
    
    //调用绘制方法
    draw3Din2D(point3d); 
  }
}
//生成飞船
generateSpaceship();

//隔一定时间生成页面图形

setInterval(function(){render();}, 15);
  
  </script>
</body>
</html>
在线演示:Here~ 


今天的分享就是这些啦,这里是igeekbar,希望可以给各位geek小伙伴们带来帮助呦~~~如果你制作出了或收藏了哪些酷酷的前端特效,赶快留言分享给我们呦~~~


Geek豪哥   iGeekBar社区大管家

iGeekBar创始人之一,热爱科技与设计,正在探索研究数据科学的女猿,最爱勾搭极客帅哥美女的逗比疯姑娘~~
     扫一扫立刻加入iGeekBar会员QQ群(545980198)
    和更多iG客会员交流分享吧~