Javascript 画布动画图像旋转

我想在画布上为我的脚本创建一个背景，使图像在屏幕上落下并向下旋转。那么，有没有人能向我解释一下如何旋转图像，然后使用

元素将其绘制到屏幕上。我有以下代码：

    Equations.prototype.Draw = function() {
        //increases the rotational value every loop
        this.rotate = (this.rotate + 1) % 360;
        //rotates the canvas
        ctx.rotate(this.rotate*Math.PI/180);
        //draw the image using current canvas rotation
        ctx.drawImage(this.img,this.x,this.y);
        //restore canvas to its previous state
        ctx.rotate(-this.rotate*Math.PI/180);
    };

---

我试着这样做，发现图像会旋转，但也会在屏幕上围绕点（0,0）以圆形移动。我希望它保持在原地旋转。我该怎么解决这个问题谢谢

保存

上下文

，对其进行变换、旋转、绘制和还原

const rand=（m，m）=>Math.random（）*（m-m）+m，
PI=Math.PI，
TAU=PI*2，
宽度=window.innerWidth，
高度=窗内高度，
ctx=document.getElementById（'cvs'）.getContext（'2d'），
项目=[]，
项目=功能（）{
这个h=32；
这是w=32；
this.IMG=新图像（）；
this.IMG.src=http://stackoverflow.com/favicon.ico';
这个。start（）；
归还这个；
};
Item.prototype.start=函数（）{
此.x=兰特（0，宽度-此.w/2）；
这个.y=兰德（0，高度）；
this.angle=rand（0，TAU）；
该速度=兰特（0.1,0.5）；
}
Item.prototype.move=函数（）{
//操纵属性
if（this.y>height+this.h）{//if在底部以下
这个。start（）；
this.y=-this.h；//从顶部重新启动
}
这个.y+=这个.speed/0.1；
this.angle+=this.speed；
这个角%=TAU；
//操纵上下文
保存（）；//保存上下文
ctx.translate（this.x，this.y）；//移动到点
ctx.rotate（this.angle）；//围绕该点旋转
ctx.drawImage（this.IMG，-this.w/2，-this.h/2）；
还原（）；//还原到初始坐标
};
//设置画布
ctx.canvas.width=宽度；
ctx.canvas.height=高度；
//创建下降的图标
对于（var i=0；i<100；i++）项；
//动画循环
（函数循环（）{
ctx.clearRect（0，0，宽度，高度）；
items.forEach（Item=>Item.move（））；
请求动画帧（循环）；
}());
body{margin:0；}
画布{display:block；}
请不要要求“请给我写一篇教程”。做一些研究，发布一些代码并指出一个特定的问题！请看并创建一个@RokoC.Buljan，我可以把我的代码放在问题中，说我有这个代码可以在屏幕上向下移动项目，但是我如何在项目移动时旋转它们，但是我得到了一个修改过的代码，这不能让我理解。我做过研究，发现了旋转、平移等等，但它们并没有得到很好的解释。因此，我在这里问。我所要问的是如何在javascript中旋转图像，这是一个非常简单的问题，可能值10行或更少的答案，也会让我很好地理解，而10行看起来不像是一个冗长的教程me@SamuelNewport. 欢迎来到Stackoverflow！Stackoverflow的格式是让您向我们提供到目前为止的代码，然后就代码寻求帮助。因此，是的，在寻求帮助时，您应该向我们提供代码的最低版本、完整版本和可验证版本，而不仅仅是寻求帮助好的xD抱歉我没有意识到@markEThanks，这解释了为什么我的旋转是围绕点（0,0）旋转，而不是x和y坐标旋转，谢谢！