requestAnimationFrame 动画运行越来越慢

Question

1、我想做一个循环 animation.The 点是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();
}

}());

2、好的，当代码为运行时，动画执行速度变慢，slower.So，我该如何解决？请帮帮我？

Answer 1

您忘记为 canvas 2D api 每一帧创建新路径。

要开始一条新路径，请使用 ctx.beginPath()。函数 closePath() 实际上并没有关闭当前路径，它只是将最后一个 lineTo 等终点连接到前一个 moveTo。该路径仍然有效。

添加

ctx.beginPath();

在 draw 函数中的 clearRect 之后，这将解决问题，因为您不断向路径添加内容，从而使渲染工作越来越多。

requestAnimationFrame 动画运行越来越慢

requestAnimationFrame animation is running slower and slower

javascript

animation

canvas

requestanimationframe

requestAnimationFrame 动画 运行 越来越慢

requestAnimationFrame animation is running slower and slower

javascript

animation

canvas

requestanimationframe

requestAnimationFrame 动画运行越来越慢