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

}());

2，好的，当代码运行时，动画的速度越来越慢。所以，我该如何解决？请帮我一把忙？

Answer 1

您忘记为每个画布2D api创建一个新路径。

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

添加

ctx.beginPath();

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

requestAnimationFrame动画运行越来越慢

1 个答案: