Zanikanie efektu dla tekstu w HTML5 canvas

Rysuję prostego tekstu w HTML5 canvas za pomocą tego:Zanikanie efektu dla tekstu w HTML5 canvas

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

Teraz chcę animowanie znikną z tego tekstu. Jak to zrobić?

Edycja: Mam świadomość, że obecnie nie ma sposobu, aby to zrobić (przynajmniej nie mogę znaleźć niczego). Jestem noobem w programowaniu graficznym, ale chcę się uczyć, więc każda wskazówka, gdzie zacząć, jest doceniana.

Może coś w rodzaju umieszczania tekstu na własnym płótnie i zmieniania globalnego alfa płótna ...? Ale tło płótna musi być przezroczyste. I nie wiem o wydajności, wiele małych wytwórni pojawia się i znika wszędzie, które muszą zostać wyblakłe.

Źródło

2012-03-29 Ixx

jQuery animowania Zobacz tutaj: http://stackoverflow.com/questions/5333156/using-jquery-animate-on-canvas-objects –

Łatwiej jeśli używasz RGBA() notacji ustawić fillStyle zamiast zapisie szesnastkowym. Oto przykład roboczych (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');

Źródło

2012-03-29 20:56:26 Ori

wielki Odpowiedź, ale spróbuję najpierw użyć ramki animacji i wrócić do setInterval: http://www.w3.org/TR/animation-timing/ – Ericson578

Czyścisz płótno za każdym razem dla animacji, Ale co jeśli mam już jakieś rysować na płótnie? na przykład zobacz ten-> http://jsfiddle.net/dlinx/EhD7J/305/ –

W twoim przypadku możesz użyć clearRect (...), aby wyczyścić obszar specyficzny dla zanikającego tekstu za każdym razem, ale w prawdopodobnym przypadku, niektóre nakładają się po prostu trzeba przerysować inne elementy we właściwej kolejności. Edytowanie: http://www.w3schools.com/tags/canvas_clearrect.asp – GPMorgan

Nie ma wbudowanego rozwiązania tego problemu. Musisz wykonać animację (zanikanie), rysując każdą klatkę indywidualnie:

Skonfiguruj funkcję taktowania, która oblicza gradient między # FF0000 a kolorem tła i przerysowuje tekst, aż do uzyskania koloru tła.

Źródło

2012-03-29 20:40:22 stewe

Myślę, że dostałem to. Zapomniałem wspomnieć, że mam już pętlę renderowania i obiekty tekstowe, które rysują się na płótnie każdej klatki.

Więc rozwiązaniem jest dodanie zmiennej alfa do obiektów tekstowych:

this.alpha = 1;

i każdy x ramek lub zmniejszyć ten czas nieco.

iw pętli render:

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

Źródło

2012-03-29 20:53:17 Ixx

Zanikanie efektu dla tekstu w HTML5 canvas

Odpowiedz

Powiązane problemy