キャンバスで不安定なアニメーション

Question

私のキャンバスのアニメーションは、クロムの氷のように滑らかですが、ファイアフォックスの不自然な髪の毛のようにうねりがあります。最も奇妙なことは、それは複雑な計算でもないということです。誰もがこの減速の原因となる可能性のある私のコードで間違ったこと（パフォーマンス関連）を見ますか？

ここではjsfiddleである： http://jsfiddle.net/Wu5Jh/

そして、ここでは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(); 

}); 

私はフラッシュアニメーションやGIFを避けるために期待していたが、私は選択肢がないかもしれません。

ありがとうございます！

Answer 1

LinuxでChromium 8とFirefox 3.6.13を使用していますが、問題はありません。

しかし、マイクロ最適化の提案が依然として必要な場合は、-2*pi/100,1.5*pi、.5*piなどを独自の定数として設定できます。また、これはちょうど推測ですが、ctx.globalCompositeOperationの代わりに"xor"の代わりに"copy"を使用する方が高速かもしれません。描かれた最初の円弧について計算された円弧角を保存し、完全な円を描くのではなく、2番目の円弧を使用することもできます。