html+canvas实现很真实的下雨雨落
原素材地址:http://www.htmlsucai.com/demo-9782.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #rain { position: fixed; z-index: -1; top: 0; left: 0; opacity: 0.4; width: 100vw; height: 100vh; } </style> </head> <body> <canvas id="rain"></canvas> <script type="text/javascript"> window.onload = main; function getRgb(r, g, b) { return "rgb(" + r + "," + g + "," + b + ")"; } function main() { //drop var dropList = []; var gravity = 0.4; // var linelist = []; var canvasEl = document.getElementById('rain'); var ctx = canvasEl.getContext('2d'); var mousePos = [0, 0]; var backgroundColor = '#000'; canvasEl.width = canvasEl.clientWidth; canvasEl.height = canvasEl.clientHeight; var speedx = 0; var maxspeedx = 0; window.onresize = function() { canvasEl.width = canvasEl.clientWidth; canvasEl.height = canvasEl.clientHeight; } window.onmousemove = function(e) { mousePos[0] = e.clientX; mousePos[1] = e.clientY; maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2); } // window.onmousedown=function(e) function createLine(e) { var temp = 0.25 * (50 + Math.random() * 100); var myline = { speed: 4.5 * (Math.random() * 6 + 3), die: false, posx: e, posy: -200, h: temp, color: getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75)) }; linelist.push(myline); } window.requestAnimationFrame(update); function createDrop(x, y) { var mydrop = { die: false, posx: x, posy: y, vx: (Math.random() - 0.5) * 8, vy: Math.random() * (-6) - 3, radius: Math.random() * 1.5 + 1 }; return mydrop; } function madedrops(x, y) { var maxi = Math.floor(Math.random() * 5 + 5); for (var i = 0; i < maxi; i++) { dropList.push(createDrop(x, y)); } } function update() { if (dropList.length > 0) { dropList.forEach(function(e) { e.vx = e.vx + (speedx) / 2; e.posx = e.posx + e.vx; e.vy = e.vy + gravity; e.posy = e.posy + e.vy; if (e.posy > canvasEl.clientHeight) { e.die = true; } }); } for (var i = dropList.length - 1; i >= 0; i--) { //delite die if (dropList[i].die) { dropList.splice(i, 1); } } speedx = speedx + (maxspeedx - speedx) / 50; if (Math.random() > 0) { createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width)); createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width)); createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width)); } var mydeadline = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5; linelist.forEach(function(e) { var dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos[0]) * ((e.posx + speedx * e.h) - mousePos[0]) + (e.posy + e.h - mousePos[1]) * (e.posy + e.h - mousePos[1])); if (dis < 35) { madedrops(e.posx + speedx * e.h, e.posy + e.h); e.die = true; } if ((e.posy + e.h) > mydeadline) { if (Math.random() > 0.85) { madedrops(e.posx + speedx * e.h, e.posy + e.h); e.die = true; } } if (e.posy >= canvasEl.clientHeight) { e.die = true; } else { e.posy = e.posy + e.speed; e.posx = e.posx + (e.speed * speedx); } }); for (var i = linelist.length - 1; i >= 0; i--) { if (linelist[i].die) { linelist.splice(i, 1); } } render(); window.requestAnimationFrame(update); } function render() { ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); linelist.forEach( function(line) { ctx.strokeStyle = line.color; ctx.lineWidth = 4.5; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); ctx.lineTo(line.posx + speedx * line.h, line.posy + line.h); ctx.stroke(); }); ctx.lineWidth = 1; ctx.strokeStyle = "#fff"; dropList.forEach(function(e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); }); } } </script> </body> </html>
有问题联系QQ1291481728或在下方评论,会在第一时刻处理。