La bola de lona se mueve en una trayectoria elíptica oblicua.

Hay ejemplos en los documentos web de MDN sobre el uso de lienzos para dibujar animaciones del sistema solar. Este método requiere el uso de traducir para cambiar constantemente el origen del lienzo.

Referencia de ejemplo de MDN: ejemplo de movimiento del sistema solar

Ahora necesitamos dibujar un efecto de animación de una pequeña bola que gira alrededor de una elipse en el lienzo.

Primero, puede usar el modo constructor js para definir un objeto bola

function ball(x, y, obj) {
	this.x = x;
	this.y = y;
	this.angle = 0;
	this.draw = function() {
		var self = this;
		ctx.drawImage(obj, self.x, self.y);
	}
};

xey representan las coordenadas de la bola dibujada en el lienzo
El ángulo representa el valor del ángulo de la bola que se mueve alrededor del punto central, el máximo es 360. En el proceso de dibujo de animación, establezca el ángulo en 0 cuando el ángulo sea igual a 360.
obj es la pequeña bola que hay que sacar

Dibuja la bola en el lienzo con el siguiente código

<style type="text/css">
	#mycanvas {
		margin: 80px;
		border: 1px solid black;
	}
</style>
<canvas id="mycanvas" width="500" height="500"></canvas>
		
<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var ctx = canvas.getContext('2d');
	var imgball = new Image(); // 创建img元素
	imgball.src = './img/Canvas_earth.png';
	imgball.onload = function() {
		ctx.drawImage(imgball, 200, 100);
	}

	function ball(x, y, obj) {
		this.x = x;
		this.y = y;
		this.angle = 0;
		this.draw = function() {
			var self = this;
			ctx.drawImage(obj, self.x, self.y);
		}
	};
	
	var ball01 = new ball(167, 100, imgball);
	function draw() {
	    ctx.clearRect(0, 0, canvas.width, canvas.height);
		ball01.draw();
	}
</script>

ctx.clearRect (0, 0, canvas.width, canvas.height); puede borrar la pista antes que el lienzo

Efecto:
Inserte la descripción de la imagen aquí
A continuación, puede hacer que la bola se mueva en una trayectoria elíptica regular. El diámetro de la bola es 24 y el radio es 12

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var ctx = canvas.getContext('2d');
	var imgball = new Image(); // 创建img元素
	imgball.src = './img/Canvas_earth.png';
	imgball.onload = function() {
		ctx.drawImage(imgball, 200, 100);
	}

	function ball(x, y, obj) {
		this.x = x;
		this.y = y;
		this.angle = 0;
		this.draw = function() {
			var self = this;
			ctx.drawImage(obj, self.x, self.y);
		}
	};

	var ball01 = new ball(167, 100, imgball);
	var P0 = 0, P1 = 0, Z0 = 9 ,Z1 = 3;
	function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		if (ball01.angle == 360) {
			ball01.angle = 0;
		}
		ball01.angle += 1; //角度
		var radian = ball01.angle * (Math.PI / 180); //弧度

		ball01.x = (167 + 140 * Math.cos(radian)) - 24 / 2;   //小球半径
		ball01.y = (100 + 40 * Math.sin(radian)) - 24 / 2;
		ball01.draw();
		
		raf = window.requestAnimationFrame(draw);
	}
	draw();
</script>

Efecto:
La pelota se mueve en una trayectoria elíptica regular.
La elipse oblicua es equivalente a
Inserte la descripción de la imagen aquí
la fórmula de cálculo para los puntos de coordenadas xey de la elipse oblicua formada al girar un cierto ángulo con respecto al origen del centro :

Código actual:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		<style type="text/css">
			#mycanvas {
				margin: 80px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>

		<script type="text/javascript">
			var canvas = document.getElementById('mycanvas');
			var ctx = canvas.getContext('2d');
			var imgball = new Image(); // 创建img元素
			imgball.src = './img/Canvas_earth.png';

			function ball(x, y, obj) {
				this.x = x;
				this.y = y;
				this.angle = 0;
				this.draw = function() {
					var self = this;
					ctx.drawImage(obj, self.x, self.y);
				}
			};

			var ball01 = new ball(167, 100, imgball);
			function draw() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				if (ball01.angle == 360) {
					ball01.angle = 0;
				}
				ball01.angle += 1; //角度
				var radian = ball01.angle * (Math.PI / 180); //弧度
				var nx = (167 + 140 * Math.cos(radian)) - 24 / 2;
				var ny = (100 + 40 * Math.sin(radian)) - 24 / 2;
				ball01.x = nx * Math.cos(-1 / 6 * Math.PI) - ny * Math.sin(-1 / 6 * Math.PI) - 50;
				ball01.y = nx * Math.sin(-1 / 6 * Math.PI) + ny * Math.cos(-1 / 6 * Math.PI) + 80;
				ball01.draw();

				raf = window.requestAnimationFrame(draw);
			}
			draw();
		</script>
	</body>
</html>

Efecto:
Inserte la descripción de la imagen aquí
Si no se elimina la trayectoria, la elipse quedará como se muestra en la siguiente figura:

La bola de lona se mueve en una trayectoria elíptica oblicua.

Supongo que te gusta