Javascript 如何在HTML画布上旋转矩形？

我在HTML画布上旋转矩形时遇到一些问题。正如您在JS Fiddle中看到的，原始图像如下所示：。我想做的是在它们的位置上稍微旋转这些线，比如说45度

当我在JS FIDLE中取消注释注释注释代码时

ctx.translate(coords[0], coords[1]);
ctx.rotate(Math.PI / 4);

所有的原始矩形都乱七八糟，看起来一团糟。它们没有在自己的位置旋转，我真的不知道如何解决这个问题

我已经研究了以前关于在中心点旋转矩形的堆栈溢出问题，但我不确定如何找到每个矩形的中心点，以及如何为画布中的每个矩形复制此过程

---

根据以前的一些堆栈溢出答案，我尝试过执行

ctx.translate（坐标[0]+c.width/2，坐标[1]+c.height/2）

，但这似乎不起作用。任何指导都将不胜感激

在“var coords=dotPositions[i]；”之后，尝试这样做：

context.translate（rect.x+rect.width/2，rect.y+rect.height/2）

然后

context.rotate（Math.PI/4）

。绘制后，请确保使用

context.setTransform（1,0,0,1,0,0）

重置转换。

    ctx.save();
    ctx.translate(coords[0]+5, coords[1]);
    ctx.rotate(Math.PI / 4);
    ctx.rect(-5, 0, 10, 0);
    ctx.fill();
    ctx.stroke();
    ctx.restore();