Oscillate
<!doctype html> <html> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> class Ball{ // w w w .j a va 2 s. c om constructor(radius, color) { if (radius === undefined) { radius = 40; } if (color === undefined) { color = "#ff0000"; } this.x = 0; this.y = 0; this.radius = radius; this.rotation = 0; this.scaleX = 1; this.scaleY = 1; this.color = color; this.lineWidth = 1; } draw = function (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(); //x, y, radius, start_angle, end_angle, anti-clockwise context.arc(0, 0, this.radius, 0, (Math.PI * 2), true); context.closePath(); context.fill(); if (this.lineWidth > 0) { context.stroke(); } context.restore(); } } window.onload = function () { let canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), ball = new Ball(), angle = 0, centerY = 200, range = 50, speed = 0.05; ball.x = canvas.width / 2; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); ball.y = centerY + Math.sin(angle) * range; angle += speed; ball.draw(context); }()); }; </script> </body> </html>