Javascript 矩形正在翻转和旋转。我只想让它绕一个圈旋转

我不知道我做错了什么。我使用moveTo和lineTo绘制了一个矩形，因为我想制作一个类似于矩形的形状。我只想让每个角的x和y坐标移动，这样矩形就可以在两个圆之间旋转

在我有这种类型代码的区域

[Math.cos（angle*Math.PI/180）*innerRadius，Math.sin（angle*Math.PI/180）*innerRadius-5]，

矩形的宽度为-5s和+5s。当矩形开始时，宽度为10px，因为它的中心位于原点。我计算x坐标的cos，然后将其乘以内半径或外半径，这取决于哪个坐标更接近特定半径。我对y坐标也是这样。为什么会翻转

我最初想做一个长方形的形状，类似于Simon Says玩具上的灯，它亮起来，你点击亮着的那个。你能帮我用moveTo，LineTo做这个形状吗？这样这个形状就可以旋转了。右上角和右下角的坐标之间应该有一个迎宾距离，然后是另外两个

window.onload=function（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
var内半径=30；
var outerRadius=60；
var wCenter=canvas.width/2；
var hCenter=canvas.height/2
var角=0；
函数矩形（左上、右上、右下、左下）{
context.beginPath（）；
moveTo（左上[0]，左上[1]）；
lineTo（topRight[0]，topRight[1]）；
lineTo（bottomRight[0]，bottomRight[1]）；
lineTo（bottomLeft[0]，bottomLeft[1]）；
context.fillStyle=“番茄”；
context.fill（）；
closePath（）；
}
var-num；
var-otherNum；
（函数animate（）{
控制台日志（“测试”）
clearRect（0，0，canvas.width，canvas.height）；
context.save（）；
context.translate（wCenter、hCenter）
context.beginPath（）
弧（0,0，外层，0，Math.PI*2，false）；
context.fillStyle=“橙色”
//context.fillStyle=“白色”
context.fill（）；
context.beginPath（）
弧（0,0，innerRadius，0，Math.PI*2，true）；
context.fillStyle=“白色”
context.fill（）
context.beginPath（）；
context.fillStyle=“番茄”；
长方形(
[Math.cos（角度*Math.PI/180）*内半径，Math.sin（角度*Math.PI/180）*内半径-5]，
[Math.cos（angle*Math.PI/180）*outerRadius，Math.sin（angle*Math.PI/180）*outerRadius-5]，
[Math.cos（angle*Math.PI/180）*outerRadius，Math.sin（angle*Math.PI/180）*outerRadius+5]，
[Math.cos（角度*Math.PI/180）*内半径，Math.sin（角度*Math.PI/180）*内半径+5]）
--角度
context.stroke（）
closePath（）；
context.restore（）
window.requestAnimationFrame（动画）
}())
}

---

基本矩形具有点[innerRadius，-5][outerRadius，-5][outerRadius，5][innerRadius，5]

现在，您需要围绕原点旋转它，以便将每个点与旋转矩阵[[cos，sin][sin，cos]]相乘

看起来你只是旋转了中心点，而不是整个形状

下面是正确的代码

window.onload=function（）{
var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
var内半径=30；
var outerRadius=60；
var wCenter=canvas.width/2；
var hCenter=canvas.height/2
var角=0；
函数矩形（左上、右上、右下、左下）{
context.beginPath（）；
moveTo（左上[0]，左上[1]）；
lineTo（topRight[0]，topRight[1]）；
lineTo（bottomRight[0]，bottomRight[1]）；
lineTo（bottomLeft[0]，bottomLeft[1]）；
context.fillStyle=“番茄”；
context.fill（）；
closePath（）；
}
var-num；
var-otherNum；
（函数animate（）{
控制台日志（“测试”）
clearRect（0，0，canvas.width，canvas.height）；
context.save（）；
context.translate（wCenter、hCenter）
context.beginPath（）
弧（0,0，外层，0，Math.PI*2，false）；
context.fillStyle=“橙色”
//context.fillStyle=“白色”
context.fill（）；
context.beginPath（）
弧（0,0，innerRadius，0，Math.PI*2，true）；
context.fillStyle=“白色”
context.fill（）
context.beginPath（）；
context.fillStyle=“番茄”；
长方形(
[Math.cos（angle*Math.PI/180）*innerRadius-Math.sin（angle*Math.PI/180）*5，-Math.sin（angle*Math.PI/180）*innerRadius-Math.cos（angle*Math.PI/180）*5]，
[Math.cos（angle*Math.PI/180）*outerRadius-Math.sin（angle*Math.PI/180）*5，-Math.sin（angle*Math.PI/180）*outerRadius-Math.cos（angle*Math.PI/180）*5]，
[Math.cos（angle*Math.PI/180）*outerRadius+Math.sin（angle*Math.PI/180）*5，-Math.sin（angle*Math.PI/180）*outerRadius+Math.cos（angle*Math.PI/180）*5]，
[Math.cos（angle*Math.PI/180）*innerRadius+Math.sin（angle*Math.PI/180）*5，-Math.sin（angle*Math.PI/180）*innerRadius+Math.cos（angle*Math.PI/180）*5]）
--角度
context.stroke（）
closePath（）；
context.restore（）
window.requestAnimationFrame（动画）
}())
}

---

谢谢您的回答。我不认为这会是那么复杂，我会使用一个矩阵。我从来没用过，所以我不明白。我想要这样一个简单的答案，但我想因为有8个坐标，它变得更复杂，所以矩阵更重要。这就是使用矩阵的原因吗？**当你说：*“看起来你只是旋转了中心点，而不是整个形状。”你是指矩形的中心点吗。我想旋转所有的点。