效果图：
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 </style>
15 </head>
16
17 <body>
18 <canvas id="canvas"></canvas>
19
20 <script>
21 var canvas = document.querySelector("#canvas");
22 var ctx = canvas.getContext("2d");
23 // -6是滚动条
24 var w = document.documentElement.clientWidth - 6;
25 var h = document.documentElement.clientHeight - 6;
26 canvas.width = w;
27 canvas.height = h;
28
29 function randNum(num) {
30 return Math.random() * num;
31 }
32
33 function drawCricle(x, y, r, color) {
34 ctx.beginPath();
35 ctx.arc(x, y, r, 0, Math.PI * 2);
36 ctx.fillStyle = color || "#000";
37 ctx.fill();
38 }
39
40 function Ball(x, y) {
41 this.x = x;
42 this.y = y;
43 this.r = 60;
44 this.color = "rgb(" + parseInt(Math.random() * 255) +
45 "," + parseInt(Math.random() * 255) +
46 "," + parseInt(Math.random() * 255) + ")";
47 }
48
49 Ball.prototype.show = function() {
50 this.r--;
51 drawCricle(this.x, this.y, this.r, this.color);
52 }
53
54 function animation() {
55 var ballArr = [];
56 window.onmousemove = function(e) {
57 var ball = new Ball(e.x, e.y);
58 ballArr.push(ball);
59 ball.show();
60 }
61
62 setInterval(() => {
63 ctx.clearRect(0, 0, w, h);
64 for (var i = 0; i < ballArr.length; i++) {
65 var ball = ballArr[i];
66 if (ball.r <= 0) {
67 ballArr.splice(i, 1);
68 } else {
69 ball.show();
70 }
71 }
72 }, 10);
73 }
74
75 animation();
76 </script>
77 </body>
78
79 </html>