Bouncing
<!doctype html> <html> <head> <style> canvas {/*from w ww . j ava 2s . c o m*/ border: 1px solid red; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> class Ball { constructor(radius) { if (radius === undefined) { radius = 40; } this.x = 0; this.y = 0; this.radius = radius; this.vx = 0; this.vy = 0; this.rotation = 0; this.scaleX = 1; this.scaleY = 1; this.color = "#ff0000"; this.lineWidth = 1; } draw(context) { context.save(); context.translate(this.x, this.y); context.rotate(this.rotation); context.scale(this.scaleX, this.scaleY); context.lineWidth = this.lineWidth; context.fillStyle = this.color; context.beginPath(); context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); context.closePath(); context.fill(); context.stroke(); context.restore(); } } window.onload = function() { let canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), vx = Math.random() * 10 - 5, vy = Math.random() * 10 - 5; ball.x = canvas.width / 2; ball.y = canvas.height / 2; (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); let left = 0, right = canvas.width, top = 0, bottom = canvas.height; ball.x += vx; ball.y += vy; if (ball.x + ball.radius > right) { ball.x = right - ball.radius; vx *= -1; } else if (ball.x - ball.radius < left) { ball.x = left + ball.radius; vx *= -1; } if (ball.y + ball.radius > bottom) { ball.y = bottom - ball.radius; vy *= -1; } else if (ball.y - ball.radius < top) { ball.y = top + ball.radius; vy *= -1; } ball.draw(context); }()); }; </script> </body> </html>