HTML5超逼真下雪场景效果解析-职坐标

HTML5超逼真下雪场景效果解析

沉沙 2018-07-09 来源：阅读 1758 评论 0

摘要：这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件HTML5 canvas元素，然后在canvas中制作下雪特效。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

简要教程

这是一款基于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
});

配置参数

o particleNo：创建粒子数量，密度。

o particleSpeed：粒子下落的速度。

o particleY_Range：粒子在垂直（Y轴）方向运动范围。

o particleX_Range：粒子在垂直（X轴）方向运动范围。

o bindMouse：是否绑定鼠标事件。

o zIndex：相机离Z轴原点距离。

o angle：角度。

o wind_weight：风的等级。

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！

html5 canvas html5+css3开发工具 html5培训

本文由 @沉沙发布于职坐标。未经许可，禁止转载。