In MDN Web Docs, there is an example of animating the solar system using a Canvas, which constantly changes the canvas origin using Translate.

MDN Example Reference: Solar system motion example

Now you need to animate a small ball around an ellipse on the canvas canvas

You can start by defining a ball object using the JS constructor pattern

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); }};Copy the code
  • X and y represent the coordinates of the ball on the canvas
  • Angle represents the Angle value of the ball moving around the center point, and the maximum value is 360. During animation, set the Angle to 0 when the Angle equals 360.
  • Obj is the ball 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(); 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>Copy the code

ctx.clearRect(0, 0, canvas.width, canvas.height); You can clear the track before the canvas

Effect:



And then you can put the ball in a positive elliptical trajectory, with a diameter of 24 and a radius of 12

<script type="text/javascript"> var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); var imgball = new Image(); 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>Copy the code

Effect:



The oblique ellipse is formed when the positive ellipse is rotated by a certain Angle relative to the central origin



The calculation formula of oblique ellipse x and y coordinate points is as follows:

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(); 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>Copy the code

Effect:



Without track elimination, the resulting ellipse would look like this: