Planetas girando: animación canvas

Esta es una sencilla aniimación que simula un sistema planetario básico con órbitas circulares. Incluye un planeta con satélite.

Cada función está comentada para indicar lo que hace.

Puedes probalo en el editor online de los tutores y hacer modificaciones para ayudarte a aprender como funcionan las animaciones con el elemento Canvas

<!doctype html>

<head>

var px, py;

var lapiz, iniAmin, oAnim, fondo;

//Dibuja un círculo de radio 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>