canvas_10 像素动态文字

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