效果图：
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 var [x, y, r, speedX, speedY] = [100, 100, 20, 3, 5]; 28 29 function drawCircle(x, y, r) { 30 ctx.beginPath(); 31 ctx.arc(x, y, r, 0, Math.PI * 2); 32 ctx.fillStyle = "gold"; 33 ctx.fill(); 34 } 35 36 setInterval(() => { 37 if (x + r >= w || x - r <= 0) { 38 speedX = -speedX 39 } 40 41 if (y + r >= h || y - r <= 0) { 42 speedY = -speedY 43 } 44 45 x += speedX; 46 y += speedY; 47 ctx.clearRect(0, 0, w, h); 48 drawCircle(x, y, r); 49 }, 20) 50 </script> 51 </body> 52 53 </html>