Animations saccadées en toile

Question

Mon animation sur toile est lisse comme de la glace en chrome, mais saccadée comme une mauvaise coupe de cheveux dans firefox. La chose la plus étrange est, ce n'est même pas un calcul complexe. Est-ce que quelqu'un voit quelque chose de mal (lié à la performance) avec mon code qui pourrait causer ce ralentissement?

Ici, il est en jsFiddle: http://jsfiddle.net/Wu5Jh/

Et ici il est pour le SO:

$(document).ready(function(){ 
    //vars 
    var x = 20, 
      y = 20, 
      pi = Math.PI, 
      width, 
      height, 
      complete = 100, 
      refreshInterval, 
      ctx; 

    // computed vars 
    function init() { 
     ctx = $('#canvas')[0].getContext("2d"); 
     width = $("#canvas").width(); 
     height = $("#canvas").height(); 
     center = [width/2, height/2]; 
     refreshInterval = (function doSetTimeout(){ 
      draw(); 
      setTimeout(doSetTimeout, 30); 
      })(); 
     }; 

    function circle(x,y,r) { 

     // Draw the growing circle 
     ctx.fillStyle = "#09f"; 
     ctx.beginPath(); 
    ctx.moveTo(x, y); // center of the pie 
     ctx.arc(
      x, 
      y, 
      r, 
      -2*pi*complete/100 + pi*1.5, 
      -pi*.5, 
      true 
     ); 
     ctx.lineTo(x, y); 
     ctx.closePath(); 
     ctx.fill(); 

     // Draw the cutout 
     ctx.globalCompositeOperation = "xor"; 
     ctx.fillStyle = "#fff"; 
     ctx.beginPath(); 
     ctx.arc(x,y,r/2,0,pi*2,true); 
     ctx.fill(); 
    } 

    function clear() { 
     ctx.clearRect(0, 0, width, height); 
    } 

    function timeCheck(){ 
     if (complete>0){ 
      complete -= 1; 
     } 
     else { 
      clearInterval(refreshInterval); 
     } 
    } 

    function draw() { 
     clear(); 
     circle(x, y, 20); 
     timeCheck(); 
    } 

    init(); 

}); 

J'espérais éviter une animation flash ou gif, mais je pourrais avoir pas le choix.

Merci!

Answer 1

Je ne vois pas vraiment de problèmes et j'utilise Chromium 8 et Firefox 3.6.13 sous Linux. Cependant, si vous voulez toujours des suggestions pour les micro-optimisations, vous pouvez faire des choses comme -2*pi/100, 1.5*pi et .5*pi comme leurs propres constantes. Aussi, c'est juste une supposition, mais en utilisant "copy" au lieu de "xor" pour ctx.globalCompositeOperation pourrait être plus rapide. Vous pouvez également stocker l'angle d'arc qui est calculé pour le premier arc dessiné et l'utiliser pour la seconde, plutôt que de simplement en faire un cercle complet.