Javascript 如何在画布和js中旋转对象；我的例子不是我期望的那样

我试着绕着它的中心旋转一个矩形，但它并没有按照我的预期旋转

下面是一个例子：

矩形的中心是x，y坐标。然后我用-x，-y来转换它，把它的原点改为0,0。然后我将它旋转了几度，但它似乎并没有围绕0，0坐标旋转。我的理解是，旋转应该围绕原点或0,0旋转整个上下文

请看一下JSFIDLE以了解我的意思

我在这里遗漏了什么？

尝试一下（这将允许围绕点旋转）

let canvas=document.getElementById（'canvas'）；
设ctx=canvas.getContext（'2d'）；
设x=100；
设y=100；
设w=100；
设h=50；
设角度=Math.PI/8；
ctx.save（）；
ctx.fillStyle='#000000'；
ctx.translate（x，y）；
ctx.旋转（角度）；
ctx.fillRect（0,0,w,h）；
ctx.restore（）；
ctx.save（）；
ctx.fillStyle='#ff0000'；
ctx.beginPath（）；
弧（x，y，4，0，2*Math.PI）；
ctx.closePath（）；
ctx.fill（）；
ctx.restore（）
画布{
边框：1px纯黑；
}
你倒过来了

您不是在平移矩形，而是在平移上下文的变换矩阵。

把它想象成一张纸和一支带笔的手臂

当您转换上下文时，手臂将按照提供的方向移动。旋转上下文时，手臂正在旋转

因此，要将矩形的中心设置为旋转原点，首先需要移动手臂，使笔位于矩形的中心，然后才能旋转。我们把手臂移回初始位置，这样x和y坐标就匹配了


const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
设x=100；
设y=100；
设w=100；
设h=50；
//尝试围绕x，y旋转矩形
ctx.save（）；
ctx.fillStyle='#000000'；
//移动到转换原点
ctx.translate（x，y）；
//转化
ctx旋转（10*Math.PI/180）；
//回到我们原来的地方
ctx.translate（-x，-y）；
ctx.fillRect（x-w/2，y-h/2，w，h）；
ctx.restore（）；
//画一个红点以突出显示我要旋转矩形的点
ctx.fillStyle='#ff0000'；
ctx.beginPath（）；
弧（x，y，4，0，2*Math.PI）；
ctx.closePath（）；
ctx.fill（）

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let x = 100;
let y = 100;
let w = 100;
let h = 50;

// Draw a red dot to highlight the point I want to rotate the rectangle around
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();

// Attempt to rotate the rectangle aroumd x,y
ctx.save();
ctx.fillStyle = '#000000';
ctx.translate(-x, -y);
ctx.rotate(10 * Math.PI/180);
ctx.translate(x, y);
ctx.fillRect(x - w/2, y - h/2, w, h);
ctx.restore();