html5实现的一个简单的下雨效果

<style type="text/css">html, body{width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}canvas{background: black;}</style><canvas></canvas><script type="text/javascript" src="js/base.js"></script><script>var Rain = Rain || (function(){var _canvas = document.getElementsByTagName('canvas')[0];var _context = _canvas.getContext('2d');var _raindrop_count = 1;var _raindrop_group = [];var _wave_group = [];var _env = {floor_height: 100,canvas_width: 0,canvas_height: 0};var _raindrop = function(mx, my/*, lx, ly*/, lw, vx, vy, ax, ay){this.mx = mx;// 起点Xthis.my = my;// 起点Y//this.lx = lx;// 结束点X//this.ly = ly;// 结束点Ythis.lw = lw;// 线宽this.vx = vx;// 水平速度this.vy = vy;// 垂直速度this.ax = ax;// 水平加速度this.ay = ay;// 垂直加速度};var _wave = function(x, y, rx, ry, vx, vy, a, va){this.x = x;this.y = y;this.rx = rx;this.ry = ry;this.vx = vx;this.vy = vy;this.a = a;this.va = va;};// 方法来自http://www.cnblogs.com/shn11160/archive/2012/08/27/2658057.htmlfunction BezierEllipse1(context, x, y, a, b, s){   //关键是bezierCurveTo中两个控制点的设置   //0.5和0.6是两个关键系数（在本函数中为试验而得）   var ox = 0.5 * a,   oy = 0.6 * b;   context.save();   context.translate(x, y);   context.beginPath();   context.strokeStyle = s;   //从椭圆纵轴下端开始逆时针方向绘制   context.moveTo(0, b);    context.bezierCurveTo(ox, b, a, oy, a, 0);   context.bezierCurveTo(a, -oy, ox, -b, 0, -b);   context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);   context.bezierCurveTo(-a, oy, -ox, b, 0, b);   context.closePath();   context.stroke();   context.restore();};var _onResize = function(){_canvas.width = document.width;_canvas.height = document.height;_env.canvas_width = document.width;_env.canvas_height = document.height;}var _createRaindrop = function(){var mx = Math.random() * _env.canvas_width;var my = Math.random() * (- _env.floor_height);var vx = Math.random() * -1 - 1;var vy = Math.random() * 2 + 14;var ax = Math.random() * 0;var ay = Math.random() * 0.2;return new _raindrop(mx, my, 1, vx, vy, ax, ay);}var _createWave = function(x, y, vx, vy){return new _wave(x, y, 2, 1, 2, 1, 1, .05);}var _waving = function(){_wave_group.each(function(index, wave){wave.rx += wave.vx;wave.ry += wave.vy;wave.a -= wave.va;if(wave.a <= 0){_wave_group.remove(index);return false;}BezierEllipse1(_context, wave.x, wave.y, wave.rx, wave.ry, 'rgba(255, 255, 255, {0})'.format(wave.a));});}var _Rainning = function(){for (var i = 0; i < _raindrop_count; i++){var _raindrop = _createRaindrop();_raindrop_group.push(_raindrop);}_raindrop_group.each(function(index, raindrop){raindrop.lx = raindrop.mx;raindrop.ly = raindrop.my;raindrop.vx += raindrop.ax;raindrop.vy += raindrop.ay;raindrop.mx += raindrop.vx;raindrop.my += raindrop.vy;if(raindrop.my > (_env.canvas_height - _env.floor_height)){var wave = _createWave(raindrop.mx, raindrop.my);_raindrop_group.remove(index);_wave_group.push(wave);return false;}_context.beginPath();_context.lineWidth = raindrop.lw;_context.moveTo(raindrop.mx, raindrop.my);_context.lineTo(raindrop.lx, raindrop.ly);_context.stroke();});}return {init: function(){window.onresize = _onResize;_onResize();_context.strokeStyle = '#999';setInterval(function(){_context.clearRect(0, 0, _env.canvas_width, _env.canvas_height);_Rainning();_waving();}, 33);}}})();Rain.init();</script>

base.js的代码请从该文章获取http://blog.csdn.net/coderq/article/details/7229050