requestAnimationFrameアニメーションの実行速度が遅く、遅い

Question

1、私はループアニメーションを作りたい。その点は変更されているcreateRadialGradient（）です。以下のようなコードの詳細：、アニメーションは、私はそれを修正することができますどのように、遅く、slower.Soコードが実行されている

(function(){ 
    var ctx = null; 

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequsestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function(callback){ 
     window.setTimeout(callback, 1000/60); 
    }; 
})(); 

var star = { 
    radius: 0, 
    step: 2*Math.PI/60, 
    canvas: document.querySelector("canvas"), 
    init: function(){ 
     ctx = this.canvas.getContext("2d"); 
     this.animate(); 

    }, 
    radialGradient: function(){ 
     if(this.radius>=2*Math.PI){ 
      this.radius = 0; 
     } 
     var radGrad=ctx.createRadialGradient((Math.cos(this.radius)*80+250),(Math.sin(this.radius)*80+250),15,250,250,1800); 
      radGrad.addColorStop(0.0,"white"); 
      radGrad.addColorStop(0.05,"yellow"); 
     this.radius += this.step; 
     return radGrad; 
    }, 
    draw: function(){ 
     ctx.clearRect(0, 0, 500, 500); 
     ctx.moveTo(76,197); 
     ctx.lineTo(421,197); 
     ctx.lineTo(143,399); 
     ctx.lineTo(248,71); 
     ctx.lineTo(356,399); 
     ctx.lineTo(76,197); 
     ctx.fillStyle = this.radialGradient(); 
     ctx.closePath(); 
     ctx.lineWidth = 6; 
     ctx.stroke(); 
     ctx.fill(); 
    }, 
    animate: function(){ 
     star.play = requestAnimFrame(star.animate); 
     star.draw(); 
    } 

}; 

window.onload = function(){ 
    star.init(); 
} 

}()); 

2、OK、excutingされますか？私に手を差し伸べてください。

Answer 1

各フレームのキャンバス2D apiの新しいパスを作成するのを忘れています。

新しいパスを開始するには、ctx.beginPath()を使用します。関数closePath（）は現在のパスを実際に閉じるわけではなく、直前のlineToなどのエンドポイントを前のmoveToに結合するだけです。パスはまだアクティブです。

はドロー機能でちょうどclearRect後

ctx.beginPath(); 

を追加し、あなたがレンダリングし、より多くの仕事を与えたパスに追加しておく現時点でように、その問題を解決します。