效果图：
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 25 var w = canvas.width; 26 var h = canvas.height; 27 28 function randNum(num) { 29 return Math.random() * num; 30 } 31 32 /** 33 * x 起始x坐标 34 * y 起始y坐标 35 * color 小球颜色 36 * xSpeed x轴速度 37 * ySpeed y轴速度 38 */ 39 40 // 初始化小球坐标 41 function Ball() { 42 this.x = randNum(5) + 60; // 60 防止卡住 43 this.y = randNum(3) + 60; 44 this.r = randNum(50) + 10; // [10, 60) 45 this.xSpeed = randNum(3) + 2; // [2, 5) 46 this.ySpeed = randNum(3) + 1; // [1, 4) 47 this.color = "#" + parseInt(Math.random() * 0xffffff).toString(16); 48 } 49 50 // 定义小球显示方法 51 Ball.prototype.show = function() { 52 // 更新球坐标 53 this.run(); 54 55 ctx.beginPath(); 56 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); 57 ctx.fillStyle = this.color; 58 ctx.fill(); 59 } 60 61 // 小球运动 62 Ball.prototype.run = function() { 63 if (this.x + this.r >= w || this.x - this.r <= 0) { 64 this.xSpeed = -this.xSpeed 65 } 66 67 if (this.y + this.r >= h || this.y - this.r <= 0) { 68 this.ySpeed = -this.ySpeed 69 } 70 71 this.x += this.xSpeed; 72 this.y += this.ySpeed; 73 74 } 75 76 function animation() { 77 var ballArr = []; 78 for (var i = 0; i < 50; i++) { 79 var ball = new Ball(); 80 ballArr.push(ball); 81 ball.show(); 82 } 83 84 setInterval(() => { 85 ctx.clearRect(0, 0, w, h); 86 for (var i = 0; i < ballArr.length; i++) { 87 var ball = ballArr[i]; 88 ball.show(); 89 } 90 }, 10) 91 } 92 93 animation(); 94 </script> 95 </body> 96 97 </html>