效果图：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Canvas</title>
8 <style>
9 canvas {
10 margin: 0 auto;
11 border: 1px solid #aaa;
12 display: block;
13 }
14 </style>
15 </head>
16 <body>
17 <canvas width="500px" height="500px" id="canvas"></canvas>
18
19 <script>
20 var canvas = document.querySelector("#canvas");
21 var ctx = canvas.getContext("2d");
22 var w = canvas.width;
23 var h = canvas.height;
24
25 /*
26 假设小球运动100次后，组合成文字
27 公式：
28 x1, y1: 小球初始位置
29 x2, y2: 小球所在的文字位置
30 xSpeed = (x2 - x1)/times
31 ySpeed = (y2 - y1)/times
32 */
33
34 function drawCircle(x, y, r, color) {
35 ctx.beginPath();
36 ctx.arc(x, y, r, 0, Math.PI * 2);
37 ctx.fillStyle = color || "#000";
38 ctx.fill();
39 }
40
41 function drawText(text, x, y) {
42 ctx.font = "400px 微软雅黑";
43 ctx.textAlign = "center";
44 ctx.textBaseline = "middle";
45 ctx.fillText(text, x, y, w);
46 }
47
48 function drawFillText(text, x, y, color) {
49 ctx.font = "12px 微软雅黑";
50 ctx.fillStyle = color;
51 ctx.textAlign = "center";
52 ctx.textBaseline = "middle";
53 ctx.fillText(text, x, y, w);
54 }
55
56 function randNum(num) {
57 return Math.random() * num;
58 }
59
60 // 动态_01 定义运动次数
61 var times = 100;
62
63 // 动态_02 定义小球类
64 function Ball(xEnd, yEnd) {
65 // 小球起始位置，随机
66 this.xStart = randNum(w);
67 this.yStart = randNum(h);
68 // 小球结束为止，文字内
69 this.xEnd = xEnd;
70 this.yEnd = yEnd;
71 // 小球中心点,即小球每次运动后的位置
72 this.x = this.xStart;
73 this.y = this.yStart;
74 // 计算运动速度，起始点和终点
75 this.xSpeed = (this.xEnd - this.xStart) / times;
76 this.ySpeed = (this.yEnd - this.yStart) / times;
77 // 设置半径和颜色
78 this.r = 3;
79 this.color = "#f00";
80
81 // 设置填充颜色和文字
82 this.text = "♥";
83 this.color = "rgb(" + parseInt(Math.random() * 255) +
84 "," + parseInt(Math.random() * 255) +
85 "," + parseInt(Math.random() * 255) + ")";
86 }
87 Ball.prototype.show = function() {
88 // 计算每次小球运动后的坐标位置
89 this.x += this.xSpeed;
90 this.y += this.ySpeed;
91 // drawCircle(this.x, this.y, this.r, this.color);
92 drawFillText(this.text, this.x, this.y, this.color);
93 }
94
95 drawText("❤", w / 2, h / 2);
96 var copy = ctx.getImageData(0, 0, w, h);
97 ctx.clearRect(0, 0, w, h);
98 var leap = 10;
99 var ballArr = [];
100 for (var y = 0; y < h; y += leap) {
101 for (var x = 0; x < w; x += leap) {
102 var index = x + y * w; // 公式
103 var a = copy.data[index * 4 + 3];
104 if (a > 128) {
105 // step_03 调用小球类,画圆
106 var ball = new Ball(x, y);
107 ballArr.push(ball);
108 ball.show();
109 }
110 }
111 }
112
113 // step_04 让小球动起来
114 var count = 0;
115 var timer = setInterval(() => {
116 ctx.clearRect(0, 0, w, h);
117 for (var i = 0; i < ballArr.length; i++) {
118 ballArr[i].show();
119 };
120 count++;
121 if (count + 1 == times) {
122 clearInterval(timer)
123 }
124 }, 20)
125 </script>
126 </body>
127
128 </html>