效果图：
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 canvas {
11 margin: 0 auto;
12 border: 1px solid #aaa;
13 display: block;
14 }
15 </style>
16 </head>
17
18 <body>
19 <canvas width="500px" height="500px" id="canvas"></canvas>
20
21 <script>
22 var canvas = document.querySelector("#canvas");
23 var ctx = canvas.getContext("2d");
24 var w = canvas.width;
25 var h = canvas.height;
26
27 var titleArr = ["aaa", "bbb", "ccc", "ddd", "eee", "fff"];
28
29 /**
30 * x 起始x坐标
31 * y 起始y坐标
32 * color 小球颜色
33 * xSpeed x轴速度
34 * ySpeed y轴速度
35 */
36
37 function randNum(num) {
38 return Math.random() * num;
39 }
40
41 function drawLine(x1, y1, x2, y2, color) {
42 ctx.beginPath();
43 ctx.moveTo(x1, y1);
44 ctx.lineTo(x2, y2);
45 ctx.strokeStyle = color || "#000";
46 ctx.stroke();
47 ctx.closePath();
48 }
49
50 function drawCricle(x, y, r, color) {
51 ctx.beginPath();
52 ctx.arc(x, y, r, 0, Math.PI * 2);
53 ctx.fillStyle = color || "#000";
54 ctx.fill();
55 }
56
57 function drawText(text, x, y) {
58 ctx.font = "20px 微软雅黑";
59 ctx.textAlign = "top";
60 ctx.textBaseline = "middle";
61 ctx.fillText(text, x, y);
62 }
63
64 function Ball(text) {
65 this.x = randNum(380) + 60; // [60,440)
66 this.y = randNum(380) + 60;
67 this.r = randNum(50) + 10; // [10, 60)
68 this.xSpeed = randNum(3) + 2; // [2, 5)
69 this.ySpeed = randNum(3) + 1; // [1, 4)
70 this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16);
71 this.text = text;
72 }
73
74 Ball.prototype.show = function() {
75 // 更新球坐标
76 this.run();
77 drawCricle(this.x, this.y, this.r, this.color);
78 drawText(this.text, this.x + this.r, this.y);
79 }
80
81 Ball.prototype.run = function() {
82 if (this.x + this.r >= w || this.x - this.r <= 0) {
83 this.xSpeed = -this.xSpeed
84 }
85
86 if (this.y + this.r >= h || this.y - this.r <= 0) {
87 this.ySpeed = -this.ySpeed
88 }
89
90 this.x += this.xSpeed;
91 this.y += this.ySpeed;
92
93 }
94
95 function animation() {
96 var ballArr = [];
97 for (var i = 0; i < 5; i++) {
98 var ball = new Ball(titleArr[i]);
99 ballArr.push(ball);
100 ball.show();
101
102 /*
103 球数量 需要连接几条线
104 4号 3, 2, 1
105 3号 2, 1
106 2号 1
107 1号 0
108 */
109
110 for (var j = 0; j < i; j++) {
111 var prevBall = ballArr[j];
112 drawLine(ball.x, ball.y, prevBall.x, prevBall.y, ball.color);
113 }
114 }
115
116 setInterval(() => {
117 ctx.clearRect(0, 0, w, h);
118 for (var i = 0; i < ballArr.length; i++) {
119 var ball = ballArr[i];
120 ball.show();
121
122 for (var j = 0; j < i; j++) {
123 var prevBall = ballArr[j];
124 drawLine(ball.x, ball.y, prevBall.x, prevBall.y, ball.color);
125 }
126 }
127 }, 20)
128 }
129
130 animation();
131 </script>
132 </body>
133
134 </html>