Javascript HTML5画布-轮子旋转功能行为奇怪

在HTML5画布中，我有一个轮子，我试图旋转它，但是轮子的动作真的很疯狂。它在屏幕上来回摆动，从屏幕中出来又进入屏幕

var canvas=document.getElementById（“我的画布”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.src=”http://www.roulette30.com/wp-content/uploads/americanroulette.png";
ctx.drawImage（img，70，70，200，200）；
函数spinWheel（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.translate（0，0，canvas.width，canvas.height）；
ctx.旋转（1*Math.PI/180）；
ctx.drawImage（img，70，70，200，200）；
}
设置间隔（旋转轮，0）
#我的画布{
边框：1px纯黑；
}
您需要将旋转代码之外的部分转换为死点的半宽/半高


var canvas=document.getElementById（“我的画布”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.src=”http://www.roulette30.com/wp-content/uploads/americanroulette.png";
var速度=1；//增加速度
var循环=真；
ctx.translate（canvas.width/2，canvas.height/2）；
函数spinWheel（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.旋转（速度*Math.PI/180）；
ctx.图纸图像（img，-（img.宽度/2），-（img.高度/2））；
if（循环）requestAnimationFrame（旋转轮）；
}
纺车（）
#我的画布{
边框：1px纯黑；
}
你是说像这样吗？那正是我想要的。你应该回答这个问题来分享知识。我只需要理解为什么我们要转换为负片，将画布转换回原始位置。请参阅mozilla的旋转示例，阅读rotate sectionAccepted，以便在setInterval上使用requestAnimationFrame