Sistema solar

Esta pequeña aplicación te muestra una animación sencilla de un sistema planetario. Puedes probalo en el editor online de los tutores y hacer modificaciones para ayudarte a aprender como funcionan las animaciones con el elemento Canvas

Puedes añadirle otros planetas siguiendo el esquema usado para Marte.

Planetas girando: animación canvas

<!doctype html>

  <html lang="es">

  <head>

  <script>

	   var px, py;
 
	   var lapiz, iniAmin, oAnim,  fondo; 

	//Dibuja un	círculo de rad y color dadas en el punto de la órbita
  

  function astro(cx, rad, color){

    lapiz.arc(cx, 0, rad, 0, 2*Math.PI);

	  lapiz.fillStyle = color;
	  lapiz.fill();
	  lapiz.strokeStyle = color;

    lapiz.stroke(); 

}

//Calcula la posición de un astro en un punto de la órbita 

//gira el canvas y lo coloca en un extremo del diametro horizontal pero girado


function orbita(tiempo, vel, ra, ro, color, dib)
{

   if (dib){dibOrbita(ro, color)}; 

   lapiz.beginPath(); 

   lapiz.rotate(vel*tiempo*Math.PI/2000);

   astro(ro, ra, color); 

  } 

  function dibOrbita(rOrb, color){

     lapiz.beginPath();

	   lapiz.strokeStyle=color; 

	   lapiz.arc(0, 0, rOrb, 0, 2*Math.PI); 

	   lapiz.stroke(); 

  }
  

  function mover(time){

	   var rt = 10, rl = 2, rm= 7, vT = 5, vL = 65, vM = 2.6;

     var rOT = 100, rOL = 20, rOM = 150; 
    
	   var ta = Math.round((time - iniAnim)/10); 

	   //controla la velocidad de la animación 

	   var vis = true; 

	   lapiz.putImageData(fondo, 0,0); 

	   lapiz.save(); 

	   orbita(ta, vT, rt, rOT, "blue", vis); 
	

	   lapiz.translate(rOT, 0); 

	   orbita(ta, vL, rl, rOL, "pink", vis); 
	

	   lapiz.restore();

 	   lapiz.save();

	   orbita(ta, vM, rm, rOM, "red", vis); 
	

	   lapiz.restore(); 

	   oAnim = window.requestAnimationFrame(mover) 

  }
  

  function iniciar(){

	   var rS = 15

     var marco=document.getElementById("marco");

     lapiz = marco.getContext("2d");

	   px=marco.width/2; 

	   py=marco.height/2; 

	   lapiz.translate(px,py); 

	   astro(0,  rS, "yellow");	

	   lapiz.beginPath(); 

	   fondo = lapiz.getImageData(0,0,marco.width, marco.height); 

	   iniAnim = window.performance.now(); 

	   oAnim = window.requestAnimationFrame(mover) 

  } 

  </script> 

  </head>

<body onload="iniciar()">

<canvas id="marco" width="750" height="600" style="background-color: black"></canvas> 

<div id="texto"></div> 

</body>

Prueba este código

Una animación de objetos reales es simple si se aplican las leyes físicas y ecuaciones matemáticas adecuadas.