Javascript 画布动画显示所有先前的帧

我正在尝试旋转一个对象，但之前的所有帧仍然显示在画布上。我认为这与这一行有关：

setTimeout(this.rotate.bind(this), 1000 / 10);

如何使其仅显示当前帧

（函数（）{
变量微调器={
playerx:810*0.5，
游乐场：600*0.75，
盾：1.80，
轮换：0，
polyxx:[0,12,12,0，-12，-12]，
polyyy:[-13.92，-5.35,5.35,13.92,5.35，-5.35]，
尺码：5，
canvasInit:函数（）{
this.canvas=document.getElementById（'loadingScreen'）；
this.ctx=this.canvas.getContext（'2d'）；
},
旋转：函数（）{
这是旋转+=0.02；
该屏蔽层-=0.01；
this.ctx.strokeStyle='rgba（255255255，+this.shield+'）；
这个.ctx.save（）；
this.ctx.translate（this.playerx，this.playery-10）；
this.ctx.rotate（this.rotation）；
this.ctx.translate（-this.playerx，-（this.playery-10））；
this.ctx.beginPath（）；
this.ctx.lineWidth=17；
对于（var a=0；a<6；a++）{
this.ctx.lineTo（this.playerx+this.polyxx[a]*this.size，this.playery-10+this.polyyy[a]*this.size）；
}
this.ctx.closePath（）；
这个.ctx.stroke（）；
这个.ctx.restore（）；
this.loop（）；
},
循环：函数（）{
setTimeout（this.rotate.bind（this），1000/10）；
},
init：函数（）{
这个。canvasInit（）；
this.loop（）；
}
};
spinner.init（）；
})();
每次设置动画时，都需要清除画布

添加
this.ctx.clearRect（0,0，this.canvas.width，this.canvas.height）到
旋转
方法的开头以实现此目的

例如：


（函数（）{
变量微调器={
playerx:810*0.5，
游乐场：600*0.75，
盾：1.80，
轮换：0，
polyxx:[0,12,12,0，-12，-12]，
polyyy:[-13.92，-5.35,5.35,13.92,5.35，-5.35]，
尺码：5，
canvasInit:函数（）{
this.canvas=document.getElementById（'loadingScreen'）；
this.ctx=this.canvas.getContext（'2d'）；
},
旋转：函数（）{
//清除此处的画布，以便我们准备绘制下一帧
this.ctx.clearRect（0，0，this.canvas.width，this.canvas.height）；
这是旋转+=0.02；
该屏蔽层-=0.01；
this.ctx.strokeStyle='rgba（255255255，+this.shield+'）；
这个.ctx.save（）；
this.ctx.translate（this.playerx，this.playery-10）；
this.ctx.rotate（this.rotation）；
this.ctx.translate（-this.playerx，-（this.playery-10））；
this.ctx.beginPath（）；
this.ctx.lineWidth=17；
对于（var a=0；a<6；a++）{
this.ctx.lineTo（this.playerx+this.polyxx[a]*this.size，this.playery-10+this.polyyy[a]*this.size）；
}
this.ctx.closePath（）；
这个.ctx.stroke（）；
这个.ctx.restore（）；
this.loop（）；
},
循环：函数（）{
setTimeout（this.rotate.bind（this），1000/10）；
},
init：函数（）{
这个。canvasInit（）；
this.loop（）；
}
};
spinner.init（）；
})();