animazione ottenuta con cancellazione immagine precedente

**lanvoel** · 18-01-2019, 19:42

Vorrei realizzare un orologio analogico. Usando Canvas, ho iniziato con la lancetta dei secondi, disegnandola e poi cancellando l'immagine precedente disegnandola usando il colore dello sfondo.
Ma l'immagine cancellata usando il colore dello sfondo, non scompare completamente, forse perché i colori si sovrappongono. Cosa si deve fare per far scomparire completamente l'immagine precedente? Grazie

lanvoel

codice:

<!doctype html>
<HTML>
<body>
<canvas id="lavagna" width="400" height="400" style="border:1px solid black; "background-color:white"></canvas></p>
<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);
ctx.beginPath();
    ctx.arc(0,0, 10*u, 0, 2*Math.PI);
    ctx.stroke();
for(ag=0; ag<=360; ag=ag+6)
{
ctx.moveTo(9.3*u*Math.cos(ag*Math.PI/180),9.3*u*Math.sin(ag*Math.PI/180));
ctx.lineTo(10*u*Math.cos(ag*Math.PI/180),10*u*Math.sin(ag*Math.PI/180));
if(ag%5==0){
           ctx.moveTo(8.7*u*Math.cos(ag*Math.PI/180),8.7*u*Math.sin(ag*Math.PI/180));
           ctx.lineTo(10*u*Math.cos(ag*Math.PI/180),10*u*Math.sin(ag*Math.PI/180));
           }
ctx.stroke();
}
var ag=0;
var agm;
avvia();
function avvia()
{
secondi1=window.setInterval("secondi()",1000);
}
function secondi()
{
ctx.beginPath();
           ctx.strokeStyle="white";
           ctx.moveTo(0,0);
           ctx.lineTo(8.5*u*Math.cos(ag),8.5*u*Math.sin(ag));
           ctx.stroke();
           ag=ag+Math.PI/30;
           agm=ag;
ctx.beginPath();
           ctx.strokeStyle="black";
           ctx.moveTo(0,0);
           ctx.lineTo(8.5*u*Math.cos(agm),8.5*u*Math.sin(agm));
           ctx.stroke();         
}
</script>
</body>
</html>

**lanvoel** · 24-01-2019, 09:55

Aspettando una risposta alla domanda di come cancellare una immagine disegnandola con il colore dello sfondo, ho risolto il problema in un altro modo, e cioè cancellando ad ogni secondo tutta la canvas con l'istruzione:
ctx.clearRect(-Ox,-Oy,lavagna.width,lavagna.height);
e poi disegnare la lancetta spostata e ridisegnare tutto lo sfondo dell'orologio.

lanvoel

codice:

<!doctype html>
<HTML>
<body>
<canvas id="lavagna" width="400" height="400" style="border:1px solid black; "background-color:white"></canvas>
<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 ag=0;
avvia();
function avvia()
{
secondi1=window.setInterval("secondi()",1000);
}
function secondi()
{
 ctx.clearRect(-Ox,-Oy,lavagna.width,lavagna.height);
          
ctx.beginPath();
           ctx.strokeStyle="black";
           ctx.moveTo(0,0);
           ag=ag+Math.PI/30;
           ctx.lineTo(8.5*u*Math.cos(ag),8.5*u*Math.sin(ag));
           ctx.stroke(); 
  
ctx.beginPath();
    ctx.arc(0,0, 10*u, 0, 2*Math.PI);
    ctx.stroke();
for(ag1=0; ag1<=360; ag1=ag1+6)
{
ctx.moveTo(9.3*u*Math.cos(ag1*Math.PI/180),9.3*u*Math.sin(ag1*Math.PI/180));
ctx.lineTo(10*u*Math.cos(ag1*Math.PI/180),10*u*Math.sin(ag1*Math.PI/180));
if(ag1%5==0){
           ctx.moveTo(8.7*u*Math.cos(ag1*Math.PI/180),8.7*u*Math.sin(ag1*Math.PI/180));
           ctx.lineTo(10*u*Math.cos(ag1*Math.PI/180),10*u*Math.sin(ag1*Math.PI/180));
           }
ctx.stroke();
}     
}
</script>
</body>
</html>

Discussione: animazione ottenuta con cancellazione immagine precedente

Strumenti discussione

Ricerca discussione

Visualizza

animazione ottenuta con cancellazione immagine precedente

Permessi di invio