今天开始～小编将与大家分享一系列的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>
今天的分享就是这些啦，这里是igeekbar，希望可以给各位geek小伙伴们带来帮助呦~~~如果你制作出了或收藏了哪些酷酷的前端特效，赶快留言分享给我们呦~~~
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。