前端动态雨滴效果

前言

傻眼了！竟然有如此逼真的雨滴效果
Rainyday.js 是一个轻量的JavaScript库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。

正文

在线测试https://wow.techbrood.com/fiddle/805
效果http://about.hellosmile.xin/
源码https://github.com/hezhirong/rainyday.js
源码+Demo下载链接：https://pan.baidu.com/s/1jaT-nGtX4Czji9qmPEnnXA 提取码：y86s

var engine = new RainyDay({
    element: image,         //图像元素
                           //此值是必需的
    parentElement: someDiv, //用作画布父元素的元素
                            //如果未提供'body'元素
    crop: [0, 0, 50, 60],   //坐标如果仅图像的一部分，应使用
                            //如果没有提供整个图像将被用于
    blur: 10,               //定义模糊因雨效果
                           //如果未提供则假定为10 
                            //使用0值禁用模糊
    opacity: 1               //雨滴的不透明度
                            //如果未提供则假定为1 
});
engine.rain(
    [
        [1, 0, 20],         //添加20滴大小为1 ... 
        [3, 3, 1]           // ...和来自3大小的1滴- 6 ... 
    ],                       
    100);                  // ...每100毫秒