canvas_06 线性小球

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