当前位置:主页 > 网页特效 > HTML5+CSS3 >

html5 canvas绚丽3d星空飞行穿梭动画特效

发布时间:2019/06/30 来源:互联网 浏览: 关键词:HTML5 3D canvas 动画特效 
html5 canvas绚丽3d星空飞行穿梭动画特效 html5 canvas绚丽3d星空飞行穿梭动画特效
阿里云
简要教程

这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效。该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真。

HTML结构

HTML结构就使用一个canvas即可。

<canvasid="html5_3d_animation">Internet Explorer 8 Not Supported</canvas>

使用方法

首先要引入 jQuery和html5_3d_animation.js文件。

<scriptsrc="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"type="text/javascript"></script>
<scriptsrc="js/html5_3d_animation.js"type="text/javascript"></script>

然后使用下面的方法调用该3d星空飞行动画:

$(function() {
    $("#html5_3d_animation").html5_3d_animation({
        window_width:'600',
        window_height:'300',
        window_background:'#00113F',
        star_count:'1000',
        star_color:'#FBFFAF',
        star_depth:'100'
    });
});

参数配置

有一些可用的参数,下面加一说明:

  • window_width:canvas窗口的宽度。
  • window_height:canvas窗口的高度。
  • window_background:canvas窗口的背景颜色。
  • star_count:星星的数量。
  • star_color:星星的颜色。
  • star_depth:星空的深度。

共有人阅读,期待你的评论!评论
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top