rainyday.js写的雨滴

演示

html

<script src="https://cdn.bootcdn.net/ajax/libs/rainyday.js/0.1.2/rainyday.min.js"></script><div class="image-container">
<img src="" 
     alt="" 
     class="container" 
     id="image">
</div>  
<style>
body {
    overflow:hidden;
    height:100%;
    margin:0;
    padding:0;
}
.container {
    width:100vw;
    height:100vh;
}


.image-container {
  overflow: hidden;
}
  </style>
  <script>
  var image = document.getElementById('image');
image.onload = function() {
  var engine = new RainyDay({
    image: this,
    gravityAngle: Math.PI / 5

  });
  engine.trail = engine.TRAIL_SMUDGE;
  engine.rain([ [3, 2, 2] ], 100);
  engine.rain(
    [
        [1, 0, 20], 
        [3, 3, 1],
        [1, 2, 19]
    ],                       
    100);
 // engine.rain([ [0, 2, 200], [3, 3, 1] ], 100);
};
image.crossOrigin = 'anonymous';
image.src = 'https://mms1.baidu.com/it/u=41661540,1576179556&fm=253&app=138&f=JPEG?w=600&h=400';
</script>