rainyday.js——超逼真全屏雨滴模拟插件

8,848
rainyday.js——超逼真全屏雨滴模拟插件
  • 4.75 / 5 5
4.75分(4票)
rainyday.js——超逼真全屏雨滴模拟插件

rainyday.js 是一个模拟雨滴落在玻璃上的JavaScript 库,基于HTML5 的canvas 。rainyday.js 做出来的雨滴效果非常逼真,在模糊背景的下的雨滴一点点爬满“玻璃”,配合着的背景音乐令人浮想联翩~~好了,有兴趣的往下看。

演示效果

夜景

rainyday-js

演示地址

夏天

rainyday-js-demo02

演示地址

森林

rainyday-js-demo03

演示地址

项目地址

github     演示页面

使用方法·示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
...
<script src="rainyday.js" type="text/javascript"></script>
<script type="text/javascript">
function demo() {
var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight);
engine.gravity = engine.GRAVITY_NON_LINEAR;
engine.trail = engine.TRAIL_DROPS;
 
engine.rain([
engine.preset(0, 2, 500)
]);
 
engine.rain([
engine.preset(3, 3, 0.88),
engine.preset(5, 5, 0.9),
engine.preset(6, 2, 1),
], 100);
}
</script>
</head>

喵~本文目前有3条留言,欢迎发表评论!

  1. 赶上地板鸟
    :

    H5 太强大了,学习中

    [回复]
  2. 板凳也不错
    :

    超逼真啊,很漂亮

    [回复]
  3. 传说中的沙发
    :

    也许那些HTML5的音乐网站能用上。

    [回复]

打破沉默,我来发表评论鸟~