Wie stoppt man eine Animation in Canvas?

Question

Ich habe diesen Code Animation zu starten:

function anim() 
{ 
    mouse_x=cursor_x-x; 
    mouse_y=cursor_y-y; 
    context.fillRect(0,0,w,h); 
    for(var i=0;i<n;i++) 
     { 
     test=true; 
     star_x_save=star[i][3]; 
     star_y_save=star[i][4]; 
     star[i][0]+=mouse_x>>4; if(star[i][0]>x<<1) {star[i][0]-=w<<1; test=false; } 
     if(star[i][0]<-x<<1) { star[i][0]+=w<<1; test=false; } 
     star[i][1]+=mouse_y>>4; if(star[i][1]>y<<1) { star[i][1]-=h<<1; test=false; } 
     if(star[i][1]<-y<<1) { star[i][1]+=h<<1; test=false; } 
     star[i][2]-=star_speed; if(star[i][2]>z) { star[i][2]-=z; test=false; } 
     if(star[i][2]<0) { star[i][2]+=z; test=false; } 
     star[i][3]=x+(star[i][0]/star[i][2])*star_ratio; 
     star[i][4]=y+(star[i][1]/star[i][2])*star_ratio; 
     if(star_x_save>0&&star_x_save<w&&star_y_save>0&&star_y_save<h&&test) 
      { 
      context.lineWidth=(1-star_color_ratio*star[i][2])*2; 
      context.beginPath(); 
      context.moveTo(star_x_save,star_y_save); 
      context.lineTo(star[i][3],star[i][4]); 
      context.stroke(); 
      context.closePath(); 
      } 
     } 
    timeout=setTimeout('anim()',fps); 
    } 

Ich bin nicht in der Lage diese Animation zu stoppen. Ich möchte nicht pausieren, wollte ich nur zerstören die Animationsfunktion, so dass es nicht die Leistung meiner Anwendung verlangsamt.

$(document).ready(function() { 
    $(".destroy").click(function() { 
     context.destory; 
    }); 
}); 

Here is the full code

Answer 1

der Garbage Collector mitzuteilen, den context Speicher frei, setzen Sie nur noch die Referenzgröße auf null.

context=null; 

Vor den Kontext zu null einstellen, müssen Sie die Animation stoppen, die Sie wie folgt tun:

eine Boolesche Flag erstellen, die, wenn sollte jede zukünftige Animation zeigt ausführen:

// allow anim to do its animations 
var doAnim=true; 

Wenn dann in der Animationsschleife das Flag "stop" anzeigt, kehren Sie einfach zurück, ohne den Animationscode auszuführen:

stoppen Animieren, setzen Sie einfach die Flagge auf „Halt“:

doAnim=false; 

Dann, wenn Sie später Animieren neu starten möchten, müssen Sie nur das Flag zurückgesetzt und rufen anim Animieren zu starten.

var context=... 
doAnim=true; 
anim(); 

Answer 2

können Sie die neu zu definieren die Funktion mit Funktion Anim() {}; obwohl ich mir nicht sicher bin, warum du so etwas tun musst.

Aber basierend auf Ihrer Frage, ich nehme an, Sie wollen das resultierende Bild in der Leinwand zerstören. Die einzige Möglichkeit besteht darin, die Zeichenfläche an den Anfang oder einen zuvor gespeicherten Zustand zurückzusetzen. Wie folgt aus:

Reset:

context.clearRect(0, 0, canvas.width, canvas.height);

Speichern und Wiederherstellen: http://www.tutorialspoint.com/html5/canvas_states.htm