html5實現的一個簡單的下雨效果
阿新 • • 發佈:2019-02-04
<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; // 起點X this.my = my; // 起點Y //this.lx = lx; // 結束點X //this.ly = ly; // 結束點Y this.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.html function 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>