Javascript HTML5画布-围绕自己的原点旋转多个对象

我试图创建一个JavaScript对象，该对象有一个方法，允许矩形在rAF回调期间围绕其自身原点旋转

我所做的事情：

• 计算画布空间中对象的原点
• 使用

  ctx.save（）

  和

  ctx.restore（）

  -这就是我的问题所在

当我使用

save（）

和

restore（）

方法在不同对象的方法调用中推送和弹出保存的状态时，它要么不改变任何内容，要么停止整个动画

我的示例中的旋转似乎全局应用于画布（这是在画布上指定功能的方式）。我试图围绕多个实例围绕原点进行翻译。我在这上面花了好几个小时

JavaScript中的继承机制是否有问题，在代码示例中没有为矩形对象的不同实例重置我的转换

//作者：尼古拉斯·法佐拉里
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var xCenterCanvas=innerWidth/2；
var yCenterCanvas=innerHeight/2；
//自定义矩形对象
函数矩形自定义（x、y、w、h、颜色）{
这个.w=w；
这个，h=h；
这个.x=x；
这个。y=y；
这个颜色=颜色；
this.radians=（Math.PI/180）*2；//更改最后一个值以更改速度
//在给定坐标处绘制矩形
this.draw=函数（）{
ctx.save（）；
ctx.fillStyle=this.color；
ctx.fillRect（this.x，this.y，this.w，this.h）；
ctx.restore（）；
}
//围绕其中心相对于给定xy位置旋转矩形
this.rotativer=函数（）{
ctx.save（）；
ctx.translate（this.x+this.w*0.5，this.y+this.h*0.5）；
ctx.旋转（该弧度）；
ctx.translate（-this.x-this.w*0.5，-this.y-this.h*0.5）；
//ctx.restore（）
}
}
//单重矩形
var bkgRectangle=新矩形自定义（0，0，innerWidth，innerHeight，#212121”）；
var redRectangle=new RectangleCustom（xCenterCanvas-64，yCenterCanvas-64128128，“#F44336”）；
//主动画循环
函数mainAnimationLoop（）{
//每次调用时运行动画并清除画布
requestAnimationFrame（mainAnimationLoop）；
ctx.净重（0，0，内宽，内高）；
bkgRectangle.draw（）；
redRectangle.draw（）；
红色矩形。旋转竖立（）；
}
mainAnimationLoop（）而不是在
处绘制矩形（this.x，this.y）
您可以在0,0处绘制矩形，并将其转换为
（this.x，this.y）


//作者：尼古拉斯·法佐拉里
var canvas=document.querySelector（'canvas'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var xCenterCanvas=innerWidth/2；
var yCenterCanvas=innerHeight/2；
//自定义矩形对象
函数矩形自定义（x、y、w、h、颜色）{
这个.w=w；
这个，h=h；
这个.x=x；
这个。y=y；
这个颜色=颜色；
this.radians=（Math.PI/180）*2；//更改最后一个值以更改速度
这是旋转=0；
//在给定坐标处绘制矩形
this.draw=函数（）{
this.rotation+=this.radians；
ctx.save（）；
ctx.fillStyle=this.color；
ctx.translate（this.x，this.y）；
ctx.旋转（此旋转）；
ctx.fillRect（0,0，this.w，this.h）；
ctx.restore（）；
}
this.update=函数（）{
//动画更新
}
}
//单重矩形
var bkgRectangle=新矩形自定义（0，0，innerWidth，innerHeight，#212121”）；
var redRectangle=new RectangleCustom（xCenterCanvas-64，yCenterCanvas-64128128，“#F44336”）；
//主动画循环
函数mainAnimationLoop（）{
//每次调用时运行动画并清除画布
requestAnimationFrame（mainAnimationLoop）；
clearRect（0，0，innerWidth，innerHeight）；
bkgRectangle.draw（）；
redRectangle.draw（）；
}
mainAnimationLoop（）
非常感谢您！这就解决了问题。现在只需要找出如何使平移成为矩形的中心原点。我尝试了计算
this.x+this.w*0.5
，结果把一切都搞砸了。再次感谢你的帮助！以{0,0}为中心绘制矩形：
ctx.fillRect（-this.w/2，-this.h/2，this.w，this.h）我明白了。我开始理解翻译和绘画之间的关系。非常感谢。