requestAnimationFrame 애니메이션의 실행 속도가 느리고 느림

Question

1, 루프 애니메이션을 만들고 싶습니다. 요점은 변경되는 createRadialGradient()입니다.

이

(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(); 
} 

}()); 

이 코드가 실행되면 OK,의 애니메이션이 느린 slower.So Executing (실행 중)되어, 내가 그것을 어떻게 해결할 수 있습니다 : 같은 코드에 대한 세부 사항? 제발 도와 줘요?

Answer 1

각 프레임의 캔버스 2D API에 대한 새 경로를 만드는 것을 잊어 버리고 있습니다.

새 경로를 시작하려면 ctx.beginPath()을 사용하십시오. closePath() 함수는 실제로 현재 경로를 닫지 않으며, 마지막 lineTo 등의 끝점을 이전 moveTo에 조인합니다. 경로는 여전히 활성 상태입니다.

는 draw 함수 단지의 clearRect 후

ctx.beginPath(); 

를 추가하고 점점 더 많은 작업을 렌더링주는 경로에 계속 추가 순간으로 그 문제가 해결됩니다.