1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Orbital Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9 body {
10 background-color: #4a4a4a;
11 width: 1024px;
12 height: 768px;
13 overflow: hidden;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 }
18 canvas {
19 display: block;
20 }
21</style>
22</head>
23<body>
24<canvas id="c" width="1024" height="768"></canvas>
25<script>
26 const canvas = document.getElementById('c');
27 const ctx = canvas.getContext('2d');
28
29 const cx = 512;
30 const cy = 390;
31 const rx = 160;
32 const ry = 30;
33 const ballRadius = 13;
34 const duration = 3000; // ms per full orbit
35
36 function draw(timestamp) {
37 ctx.clearRect(0, 0, 1024, 768);
38
39 // Background
40 ctx.fillStyle = '#4a4a4a';
41 ctx.fillRect(0, 0, 1024, 768);
42
43 // Angle: start at 0 (right side), go clockwise
44 const t = (timestamp % duration) / duration;
45 const angle = t * Math.PI * 2;
46
47 const ballX = cx + rx * Math.cos(angle);
48 const ballY = cy + ry * Math.sin(angle);
49
50 // Draw ellipse
51 ctx.beginPath();
52 ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
53 ctx.strokeStyle = 'white';
54 ctx.lineWidth = 1;
55 ctx.stroke();
56
57 // Draw ball
58 ctx.beginPath();
59 ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
60 ctx.fillStyle = 'white';
61 ctx.fill();
62
63 requestAnimationFrame(draw);
64 }
65
66 requestAnimationFrame(draw);
67</script>
68</body>
69</html>