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>
Rispondi quotando