分析:获取clientWidth 、clientHeight，当超出高和宽让其随机累加折返…
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>碰壁折返</title><style>html,body {margin: 0;padding: 0;}body {box-sizing: border-box;}canvas {display: block;/* margin: 25px; */border: 1px solid red;margin: 5px auto 5px;background-color: skyblue;}</style></head><body><canvas id="myCanvas"></canvas><script>let canvas = document.getElementById("myCanvas");let ctx = canvas.getContext("2d");let ballArr = [];canvas.width = document.documentElement.clientWidth - 30;canvas.height = document.documentElement.clientHeight - 30;function Ball() {this.x = parseInt(Math.random() * canvas.width);this.y = parseInt(Math.random() * canvas.height);this.r = 10;this.color = "red";this.dx = parseInt(Math.random() * 10) - 5;this.dy = parseInt(Math.random() * 10) - 5;ballArr.push(this)}Ball.prototype.update = function() {this.x += this.dx;this.y += this.dy;if (this.x < 0 || this.x > canvas.width) {this.dx = -this.dx;}if (this.y < 0 || this.y > canvas.height) {this.dy = -this.dy}}Ball.prototype.render = function() {ctx.beginPath();ctx.globalAlpha = 1;ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);ctx.fillStyle = this.color;ctx.fill()}for (let i = 0; i < 1000; i++) {new Ball();}setInterval(function() {ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < ballArr.length; i++) {ballArr[i].render();ballArr[i].update();}}, 20)</script></body></html>
