效果图：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Canvas</title> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 html, 16 body { 17 height: 100%; 18 } 19 20 canvas { 21 display: block; 22 background-color: aqua; 23 } 24 </style> 25 </head> 26 27 <body> 28 <canvas id="canvas"></canvas> 29 30 <script> 31 var canvas = document.querySelector("#canvas"); 32 var ctx = canvas.getContext("2d"); 33 var w = canvas.width = window.innerWidth; 34 var h = canvas.height = window.innerHeight; 35 36 function randNum(min, max) { 37 return Math.random() * (max - min) + min; 38 } 39 40 function drawCircle(x, y, r, color) { 41 ctx.beginPath(); 42 ctx.arc(x, y, r, 0, Math.PI * 2); 43 ctx.strokeStyle = color || "#000"; 44 ctx.stroke(); 45 } 46 47 // 创建雨滴对象 48 function Drop() {} 49 50 Drop.prototype = { 51 init: function() { 52 this.x = randNum(0, w); 53 this.y = 0; 54 // y 方向速度 55 this.vy = randNum(3, 4); 56 // 雨滴下落的最大高度 80% ~ 90% 57 this.dropEnd = randNum(0.8 * h, 0.9 * h); 58 this.radius = 1; 59 // 半径扩大的速度 60 this.vRadius = 1; 61 // 圆的透明度 62 this.transparency = 1; 63 // 透明度的变化系数 64 this.vTransparency = 0.93; 65 }, 66 draw: function() { 67 // 雨滴下落中 68 if (this.y < this.dropEnd) { 69 ctx.fillStyle = "rgba(0, 255, 255)"; 70 ctx.fillRect(this.x, this.y, 2, 10); 71 } else { // 雨滴散开 72 ctx.beginPath(); 73 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); 74 ctx.strokeStyle = "rgba(0, 255, 255," + this.transparency + ")"; 75 ctx.stroke(); 76 } 77 78 this.update(); 79 }, 80 update: function() { 81 if (this.y < this.dropEnd) { 82 this.y += this.vy; 83 } else { 84 if (this.transparency > 0.03) { 85 this.radius += this.vRadius; 86 if (this.radius > 20) { 87 this.transparency *= this.vTransparency; 88 } 89 } else { 90 this.init(); 91 } 92 } 93 } 94 } 95 96 // main 97 window.onresize = function() { 98 w = canvas.width = window.innerWidth; 99 h = canvas.height = window.innerHeight; 100 } 101 102 var dropArray = []; 103 for (var i = 0; i < 30; i++) { 104 // 每个雨滴延迟2毫秒 105 setTimeout(function() { 106 var drop = new Drop(); 107 drop.init(); 108 dropArray.push(drop); 109 }, i * 200) 110 } 111 112 function animation() { 113 requestAnimationFrame(animation); 114 // 视觉渐变 115 ctx.fillStyle = "rgba(0, 0, 0, 0.1)" 116 ctx.fillRect(0, 0, w, h); 117 for (var i = 0; i < dropArray.length; i++) { 118 dropArray[i].draw(); 119 } 120 } 121 122 animation(); 123 </script> 124 125 </body> 126 127 </html>