Fade out effetto per il testo in HTML5 canvas

sto disegnando semplice testo in HTML5 canvas usando questo:Fade out effetto per il testo in HTML5 canvas

context.fillStyle = "#FF0000" 
context.font = "italic 20pt Arial"; 
context.fillText("sfddsfs", 50, 50);

Ora voglio animare fade out di questo testo. Come può essere fatto?

Modifica: sono a conoscenza del fatto che al momento non è disponibile un modo per farlo (almeno non riesco a trovare nulla). Sono un noob in programmazione grafica ma voglio imparare, quindi ogni suggerimento su dove iniziare è apprezzato.

Forse qualcosa come mettere il testo in una propria tela e il cambiamento globaleAlpha della tela ...? Ma lo sfondo della tela dovrebbe essere trasparente. E non so delle prestazioni, hanno un sacco di piccole etichette che appaiono e scompaiono ovunque che devono essere sfumate.

fonte

2012-03-29 Ixx

jQuery animare Vedi qui: http://stackoverflow.com/questions/5333156/using-jquery-animate-on-canvas-objects –

E 'più facile se si utilizza RGBA) la notazione (per impostare il fillStyle piuttosto che la notazione esadecimale. Ecco un esempio di lavoro (demo):

// Create a canvas element and append it to <body> 
var canvas = document.createElement('canvas'), 
    context = canvas.getContext('2d'); 
document.body.appendChild(canvas); 


function fadeOut(text) { 
    var alpha = 1.0, // full opacity 
     interval = setInterval(function() { 
      canvas.width = canvas.width; // Clears the canvas 
      context.fillStyle = "rgba(255, 0, 0, " + alpha + ")"; 
      context.font = "italic 20pt Arial"; 
      context.fillText(text, 50, 50); 
      alpha = alpha - 0.05; // decrease opacity (fade out) 
      if (alpha < 0) { 
       canvas.width = canvas.width; 
       clearInterval(interval); 
      } 
     }, 50); 
} 

fadeOut('sfddsfs');

fonte

2012-03-29 20:56:26 Ori

grande risposta, ma proverei ad usare prima un frame di animazione e il fallback a setInterval: http://www.w3.org/TR/animation-timing/ – Ericson578

Stai cancellando ogni volta la tela per l'animazione, ma se avessi già qualche disegnare su tela? per es. vedi questo-> http://jsfiddle.net/dlinx/EhD7J/305/ –

Nel tuo caso potresti usare clearRect (...) per cancellare ogni volta l'area specifica del testo in dissolvenza, ma nel probabile evento che ci sia alcuni si sovrappongono, dovrai semplicemente ridisegnare gli altri elementi nell'ordine corretto. MODIFICA: http://www.w3schools.com/tags/canvas_clearrect.asp – GPMorgan

Non esiste una soluzione integrata a questo. Devi eseguire l'animazione (dissolvenza) disegnando ogni fotogramma singolarmente:

Imposta una funzione di temporizzazione che calcola la sfumatura tra # FF0000 e il colore di sfondo e ridisegna il testo più e più volte fino a quando non viene raggiunto il colore di sfondo.

fonte

2012-03-29 20:40:22 stewe

Penso di averlo capito. Ho dimenticato di dire che ho già un ciclo di rendering e oggetti di testo che si disegnano sulla tela ogni fotogramma.

Quindi la soluzione è aggiungere variabile alfa per gli oggetti di testo:

this.alpha = 1;

e ogni x fotogrammi o tempo di ridurre questo un po '.

e nel ciclo di rendering:

context.globalAlpha = textObject.alpha; 
//draw the text 
context.globalAlpha = 1;

fonte

2012-03-29 20:53:17 Ixx

Fade out effetto per il testo in HTML5 canvas

risposta

Problemi correlati