简要教程
这是一款基于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:风的等级。
以上就是HTML5超逼真下雪场景效果的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!