效果图：
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 body { 11 margin: 0; 12 padding: 0; 13 } 14 15 canvas { 16 border: 1px solid #aaa; 17 } 18 </style> 19 </head> 20 21 <body> 22 <canvas id="canvas"></canvas> 23 24 <script> 25 var canvas = document.querySelector("#canvas"); 26 canvas.width = window.innerWidth; 27 canvas.height = window.innerHeight; 28 var ctx = canvas.getContext("2d"); 29 30 var id; 31 var mouse = { 32 x: undefined, 33 y: undefined, 34 } 35 var maxRadius = 40; 36 var minRadius = 3; 37 var colorArray = [ 38 "#2C3E50", 39 "#E74C3C", 40 "#ECF0F1", 41 "#3498DB", 42 "#2980B9", 43 ]; 44 var circleArray = []; 45 46 function Circle(x, y, dx, dy, radius) { 47 this.x = x; 48 this.y = y; 49 this.dx = dx; 50 this.dy = dy; 51 this.radius = radius; 52 this.minRadius = radius; 53 this.color = colorArray[Math.floor(Math.random() * colorArray.length)]; 54 55 this.draw = function() { 56 ctx.beginPath(); 57 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); 58 ctx.fillStyle = this.color; 59 ctx.fill(); 60 }; 61 62 this.update = function() { 63 if (this.x + this.radius > innerWidth || this.x < this.radius) { 64 // cancelAnimationFrame(id); 65 this.dx = -this.dx; 66 } 67 if (this.y + this.radius > innerHeight || this.y < this.radius) { 68 // cancelAnimationFrame(id); 69 this.dy = -this.dy; 70 } 71 this.x += this.dx; 72 this.y += this.dy; 73 74 // mouse 的辐射范围是 (50, 50) 75 if (mouse.x - this.x < 50 && mouse.x - this.x > -50 && 76 mouse.y - this.y < 50 && mouse.y - this.y > -50) { 77 // 辐射范围内的球最大半径 78 if (this.radius < maxRadius) { 79 this.radius += 1; 80 } 81 } 82 // 超出mouse辐射范围 83 else if (this.radius > this.minRadius) { 84 this.radius -= 1; 85 } 86 87 this.draw(); 88 } 89 } 90 91 function init() { 92 circleArray = []; 93 for (var i = 0; i < 1600; i++) { 94 var x = Math.random() * (innerWidth - radius * 2) + radius; 95 var y = Math.random() * (innerHeight - radius * 2) + radius; 96 var radius = Math.random() * 3 + 1; 97 var dx = (Math.random() - 0.5); 98 var dy = (Math.random() - 0.5); 99 circleArray.push(new Circle(x, y, dx, dy, radius)) 100 } 101 } 102 103 function animate() { 104 // id 定义的时候，动画已经执行 105 id = requestAnimationFrame(animate); 106 ctx.clearRect(0, 0, innerWidth, innerHeight); 107 for (var i = 0; i < circleArray.length; i++) { 108 circleArray[i].update(); 109 } 110 } 111 112 window.addEventListener('mousemove', function(e) { 113 mouse.x = e.x; 114 mouse.y = e.y; 115 }) 116 117 window.addEventListener('resize', function() { 118 canvas.width = window.innerWidth; 119 canvas.height = window.innerHeight; 120 }) 121 122 init(); 123 animate(); 124 </script> 125 </body> 126 127 </html>