title: requestAnimationFrame animation is running slower and slower
body: <p>1、I want to make a loop animation.The point is createRadialGradient() which is changing.  The detail for the code like:</p>
  
  <pre><code>(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&gt;=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();
  }
  
  }());
  </code></pre>
  
  <p>2、OK, when the code is running, the animate is excuting slower and slower.So, how can I fix it? Please give me a hand?</p>