JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Солнечная система</title>
    <style>
        canvas {
            background-color: black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="solarSystem" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('solarSystem');
        const ctx = canvas.getContext('2d');

        // Определение планет и их свойств
        const planets = [
            { name: 'Меркурий', radius: 2, orbitRadius: 50, speed: 0.04, color: '#8C7853' },
            { name: 'Венера', radius: 5, orbitRadius: 80, speed: 0.015, color: '#FFA500' },
            { name: 'Земля', radius: 5, orbitRadius: 110, speed: 0.01, color: '#4169E1' },
            { name: 'Марс', radius: 4, orbitRadius: 140, speed: 0.008, color: '#FF4500' },
            { name: 'Юпитер', radius: 12, orbitRadius: 200, speed: 0.002, color: '#DEB887' },
        ];

        function drawSun() {
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, 20, 0, Math.PI * 2);
            ctx.fillStyle = 'yellow';
            ctx.fill();
        }

        function drawPlanet(planet, angle) {
            const x = canvas.width / 2 + Math.cos(angle) * planet.orbitRadius;
            const y = canvas.height / 2 + Math.sin(angle) * planet.orbitRadius;

            ctx.beginPath();
            ctx.arc(x, y, planet.radius, 0, Math.PI * 2);
            ctx.fillStyle = planet.color;
            ctx.fill();

            // Рисуем орбиту
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, planet.orbitRadius, 0, Math.PI * 2);
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
            ctx.stroke();
        }

        let time = 0;

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 ...