HTML5超逼真下雪场景效果

当前位置:主页 > Html5库 > html5 canvas > HTML5超逼真下雪场景效果
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
HTML5超逼真下雪场景效果
分享:

    插件介绍

    这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效。

    浏览器兼容性

    浏览器兼容性
    时间:2016-12-20
    阅读:
简要教程

这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效。

使用方法

在页面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js文件。

<script src="path/to/ThreeCanvas.js"></script> 
<script src="path/to/jquery.min.js"></script> 
<script src="path/to/Snow.js"></script> 
<script src="path/to/snowFall.js"></script> 
                
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该下雪特效。

$.snowFall({
    //创建粒子数量,密度
    particleNo: 500,
    //粒子下落速度
    particleSpeed:30,
    //粒子在垂直(Y轴)方向运动范围
    particleY_Range:1300,
    //粒子在垂直(X轴)方向运动范围
    particleX_Range:1000,
    //是否绑定鼠标事件
    bindMouse: false,
    //相机离Z轴原点距离
    zIndex:600,
    //摄像机视野角度
    angle:55,
    wind_weight:0
});               
                

配置参数

  • particleNo:创建粒子数量,密度。
  • particleSpeed:粒子下落的速度。
  • particleY_Range:粒子在垂直(Y轴)方向运动范围。
  • particleX_Range:粒子在垂直(X轴)方向运动范围。
  • bindMouse:是否绑定鼠标事件。
  • zIndex:相机离Z轴原点距离。
  • angle:角度。
  • wind_weight:风的等级。

网友评论