The canvas ball moves around an oblique elliptical trajectory

There are examples in the MDN web docs about using canvas to draw solar system animation. This method requires the use of translate to constantly change the origin of the canvas.

MDN example reference: solar system motion example

Now we need to draw an animation effect of a small ball rotating around an ellipse on the canvas

First, you can use the js constructor mode to define a ball object

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);
	}
};

x and y represent the coordinates of the ball drawn on the canvas
angle represents the angle value of the ball moving around the center point, the maximum is 360. In the animation drawing process, set the angle to 0 when the angle is equal to 360.
obj is the small ball that needs to be drawn

Draw the ball on the canvas with the following code

<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); can clear the track before the canvas

Effect:
Insert picture description here
Next, you can make the ball move in a positive elliptical trajectory, the diameter of the ball is 24, and the radius is 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>

Effect:
The ball moves on a regular elliptical trajectory
The oblique ellipse is equivalent to
Insert picture description here
the calculation formula for the x and y coordinate points of the oblique ellipse formed by rotating a certain angle relative to the center origin :

Current code:

<!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>

Effect:
Insert picture description here
If the trajectory is not eliminated, the ellipse formed will be as shown in the figure below:

The canvas ball moves around an oblique elliptical trajectory

Guess you like