efecto de fundido para el texto en el canvas de HTML5

estoy dibujando texto simple en el canvas de HTML5 usando esto:efecto de fundido para el texto en el canvas de HTML5

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

Ahora quiero animar fundido de salida de este texto. ¿Cómo se puede hacer eso?

Editar: Estoy al tanto de que actualmente no hay una forma lista para usarlo (al menos no puedo encontrar nada). Soy un novato en programación gráfica pero quiero aprender, así que cualquier pista sobre dónde empezar se agradece.

Tal vez algo así como poner el texto en un lienzo propio y cambiar globalAlpha del lienzo ...? Pero el fondo del lienzo debería ser transparente. Y no sé sobre el rendimiento, aparecen muchas pequeñas etiquetas y desaparecen en todas partes, lo que necesita desvanecerse.

Fuente

2012-03-29 Ixx

jQuery animado Ver aquí: http://stackoverflow.com/questions/5333156/using-jquery-animate-on-canvas-objects –

Es más fácil si se utiliza la notación RGBA() para establecer la fillStyle en lugar de la notación hexadecimal. Aquí está un ejemplo de trabajo (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');

Fuente

2012-03-29 20:56:26 Ori

gran responda, pero trataría de usar primero un marco de animación y un repliegue para setInterval: http://www.w3.org/TR/animation-timing/ – Ericson578

Está borrando lienzos cada vez para la animación, pero ¿qué pasa si ya tengo algunos dibujando en el lienzo? por ej. vea esto-> http://jsfiddle.net/dlinx/EhD7J/305/ –

En su caso podría usar clearRect (...) para borrar el área específica del texto de desvanecimiento cada vez, pero en el caso probable de que haya un poco de superposición, solo tendrá que volver a dibujar los otros elementos en el orden correcto. EDITAR: http://www.w3schools.com/tags/canvas_clearrect.asp – GPMorgan

No hay una solución incorporada a esto. Tienes que hacer la animación (fundido) dibujando cada cuadro individualmente:

Configura una función de tiempo que calcula el gradiente entre # FF0000 y el color de fondo y vuelve a dibujar el texto una y otra vez hasta que se alcanza el color de fondo.

Fuente

2012-03-29 20:40:22 stewe

Creo que lo tengo. Olvidé mencionar que ya tengo un bucle de renderizado y objetos de texto que se dibujan en el lienzo de cada cuadro.

Así que la solución es añadir la variable alfa para los objetos de texto:

this.alpha = 1;

y cada X marcos de tiempo o reducir esto un poco.

y en el bucle de render:

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

Fuente

2012-03-29 20:53:17 Ixx

efecto de fundido para el texto en el canvas de HTML5

Respuesta

Cuestiones relacionadas