The following code shows how to apply one sine wave to one property and the other sine wave to another property.
<!doctype html> <html> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> class Ball{ // w w w. j a v a2 s .co m 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(), angleX = 0, angleY = 0, range = 50, centerX = canvas.width / 2, centerY = canvas.height / 2, xspeed = 0.07, yspeed = 0.11; (function drawFrame () { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); ball.x = centerX + Math.sin(angleX) * range; ball.y = centerY + Math.sin(angleY) * range; angleX += xspeed; angleY += yspeed; ball.draw(context); }()); }; </script> </body> </html>