html在图片上实现下雨效果

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <style media="screen">
 6 body {
 7     overflow: hidden;
 8     height: 100%;
 9     margin: 0;
10     padding: 0;
11 }
12 
13 img {
14     width: 100%;
15     height: 100%;
16 }
17 </style>
18 <script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.2.min.js" type="text/javascript"></script>
19 <script type="text/javascript">
20     function run() {
21         var image = document.getElementById('background');
22         image.onload = function() {
23             var engine = new RainyDay({
24                 image : this,
25             });
26             engine.rain([ [ 1, 2, 8000 ] ]);
27             engine.rain([ [ 3, 3, 0.88 ], [ 5, 5, 0.9 ], [ 6, 2, 1 ] ], 100);
28         }
29         image.crossOrigin = 'anonymous';
30         image.src = 'http://i.imgur.com/N7ETzFO.jpg';
31     }
32 </script>
33 <title>哇塞！</title>
34 </head>
35 <body onLoad="run();">
36     <img id="background" alt="background" src="" />
37 </body>
38 </html>