效果图：
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>