Si può convertire una animazione in html, come per esempio quella riportata in basso, in un video?
E se sì, come fare? Grazie

lanvoel

codice:
<!doctype html>
<HTML>
<body>
<canvas id="lavagna" width="400" height="400" style="border:1px solid blue";></canvas>
<br> Pianeti: Mercurio, Venere, Terra, Marte.
<br> Satelliti: Luna, Fobos, Deimos.
<script> 
  var c = document.getElementById('lavagna');
  const Ox=c.width/2;   //ascissa origine
  const Oy=c.height/2;  //ordinata origine
  const u = 20;         //unità di misura
  var ctx=c.getContext("2d");
 //TRASLAZIONE
 ctx.translate(Ox,Oy); 
var Terra=0;
var Venere=0;
var Mercurio=0;
var Marte=0;
var Luna=0;
var Fobos=0;
var Deimos=0;
var agt=0;
var agv=0;
var agm=0;
var agma=0;
var al=0;
var af=0;
var ad=0;
avvia();
function avvia()
{
Pianeti1=window.setInterval("Pianeti()",50);
}
function Pianeti()
{
          ctx.clearRect(-Ox,-Oy,lavagna.width,lavagna.height);
ctx.beginPath();
    ctx.strokeStyle="orange";
    ctx.fillStyle="yellow";
    ctx.arc(0,0, 1.2*u, 0, 2*Math.PI)
    ctx.fill();
    ctx.stroke();
ctx.closePath();
ctx.font="15px Arial";
ctx.lineWidth=1;
ctx.fillStyle="red";
ctx.fillText("Sole", 0, 0);
ctx.strokeStyle="blue";
ctx.strokeText("Sole", 0,0);
/*******************Terra************************************************************/
     Terra = Terra-1;
     agt=((Terra-15)*Math.PI/500);
Luna=Luna-1;
al=((Luna-15)*Math.PI/50);
ctx.beginPath();
    ctx.strokeStyle="green";
    ctx.arc(0,0, 6.5*u, 0, 2*Math.PI)
    ctx.stroke();
ctx.closePath(); 
ctx.beginPath();
ctx.fillStyle="lightgreen";
ctx.arc(6.5*u*Math.cos(agt),6.5*u*Math.sin(agt),10,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(6.5*u*Math.cos(agt),6.5*u*Math.sin(agt),25,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="lightblue";
ctx.translate(6.5*u*Math.cos(agt),6.5*u*Math.sin(agt));
ctx.arc(25*Math.cos(al),25*Math.sin(al),5,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.translate(-6.5*u*Math.cos(agt),-6.5*u*Math.sin(agt))
ctx.closePath();
   ctx.beginPath();
   ctx.fillStyle="red"
   ctx.fillText(Math.abs(Math.round(Terra/1000)),6.5*u*Math.cos(agt),6.5*u*Math.sin(agt));
   ctx.closePath();
/*******************Venere************************************************************/
     Venere = Venere-1;
     agv=((Venere)*Math.PI/310);
ctx.beginPath();
    ctx.strokeStyle="blue";
    ctx.arc(0,0, 4.5*u, 0, 2*Math.PI)
    ctx.stroke();
    ctx.closePath();
ctx.beginPath();
ctx.fillStyle="white";
ctx.arc(4.5*u*Math.cos(agv),4.5*u*Math.sin(agv),10,0,2*Math.PI);
ctx.fill()
ctx.stroke();
   ctx.beginPath();
   ctx.fillStyle="blue"
   ctx.fillText(Math.abs(Math.round(Venere/620)),4.5*u*Math.cos(agv),4.5*u*Math.sin(agv));
   ctx.closePath()
/*******************Mercurio************************************************************/
     Mercurio = Mercurio-1;
     agm=((Mercurio)*Math.PI/120);
ctx.beginPath();
    ctx.strokeStyle="cyan";
    ctx.arc(0,0, 2.5*u, 0, 2*Math.PI)
    ctx.stroke();
    ctx.closePath();
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.arc(2.5*u*Math.cos(agm),2.5*u*Math.sin(agm),10,0,2*Math.PI);
ctx.fill()
ctx.stroke();
   ctx.beginPath();
   ctx.fillStyle="blue"
  ctx.textBaseline="middle";
  ctx.textAlign="center";
   ctx.fillText(Math.abs(Math.round(Mercurio/240)),2.5*u*Math.cos(agm),2.5*u*Math.sin(agm));
   ctx.closePath();
/*******************Marte************************************************************/
     Marte = Marte-1;
     agma=((Marte)*Math.PI/940);
Fobos=Fobos-1;
af=((Fobos-15)*Math.PI/35);
Deimos=Deimos-1;
ad=((Deimos-15)*Math.PI/50);
ctx.beginPath();
    ctx.strokeStyle="red";
    ctx.arc(0,0, 9.5*u, 0, 2*Math.PI)
    ctx.stroke()
    ctx.closePath;
ctx.beginPath();
ctx.fillStyle="red";
ctx.arc(9.5*u*Math.cos(agma),9.5*u*Math.sin(agma),10,0,2*Math.PI);
ctx.fill()
ctx.stroke();
   ctx.beginPath();
   ctx.fillStyle="blue"
   ctx.fillText(Math.abs(Math.round(Marte/1880)),9.5*u*Math.cos(agma),9.5*u*Math.sin(agma));
   ctx.closePath();
ctx.beginPath();
ctx.arc(9.5*u*Math.cos(agma),9.5*u*Math.sin(agma),20,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
   ctx.translate(9.5*u*Math.cos(agma),9.5*u*Math.sin(agma));
ctx.fillStyle="magenta";
ctx.arc(20*Math.cos(af),20*Math.sin(af),5,0,2*Math.PI);
ctx.fill();
ctx.stroke();
    ctx.translate(-9.5*u*Math.cos(agma),-9.5*u*Math.sin(agma))
ctx.closePath();
ctx.beginPath();
ctx.arc(9.5*u*Math.cos(agma),9.5*u*Math.sin(agma),30,0,2*Math.PI);
ctx.stroke();
ctx.beginPath();
   ctx.translate(9.5*u*Math.cos(agma),9.5*u*Math.sin(agma));
ctx.fillStyle="grey";
ctx.arc(30*Math.cos(ad),30*Math.sin(ad),5,0,2*Math.PI);
ctx.fill();
ctx.stroke();
    ctx.translate(-9.5*u*Math.cos(agma),-9.5*u*Math.sin(agma))
ctx.closePath();
}
</script>
</body>
</html>