Javascript 画布变换旋转瑕疵

我有一个小代码，可以让一个简单的图像旋转

var img=新图像（50200）；
img.addEventListener（“加载”，（e）=>{
setInterval（函数（）{
main.getContext（“2d”）.clearRect（0,060400）；
main.getContext（“2d”）.rotate（-1*Math.PI/180）；
main.getContext（“2d”）.drawImage（img，0，0，50，200，0，0，50，200）；
}, 50);
});
img.src=”https://i.stack.imgur.com/gCWW9.png";
事实上，我发现了问题所在，似乎变换矩阵对clearRect（）方法也有影响，因此“清除区域”也会旋转

只需添加setTransform（1,0,0,1,0,0），在调用clearRect（）之前重置变换矩阵，如下所示：


var旋转=0；
var img=新图像（50200）；
img.addEventListener（“加载”，（e）=>{
setInterval（函数（）{
旋转--；
main.getContext（“2d”）.setTransform（1,0,0,1,0,0）；//缺少该行
main.getContext（“2d”）.clearRect（0,060400）；
main.getContext（“2d”）.rotate（rotation*Math.PI/180）；
main.getContext（“2d”）.drawImage（img，0，0，50，200，0，0，50，200）；
}, 50);
});
img.src=”https://i.stack.imgur.com/gCWW9.png";
根据@GolfWolf的评论，我使用了以下代码，它是有效的


var img=新图像（50200）；
img.addEventListener（“加载”，（e）=>{
setInterval（函数（）{
main.getContext（“2d”）.clearRect（-0.5，-0.5600400）；
main.getContext（“2d”）.rotate（-1*Math.PI/180）；
main.getContext（“2d”）.drawImage（img，0，0，50，200，0，0，50，200）；
}, 50);
});
img.src=”https://i.stack.imgur.com/gCWW9.png";

不知道确切的原因，但如果您知道，
main.getContext（“2d”）.clearRect（-1，-1600400）很好用。哦，没关系。我发现：请注意，所有浏览器中都有
resetTransform（）
，您可以使用
setTransform（1,0,0,1,0,0）
。我建议将上下文缓存到变量中。感谢提供兼容性信息！我用你的方法编辑我的答案