Javascript 将画布中的图像旋转到左上角

我试图在画布内旋转图像，但将图像保持在左上角。我已经设法让它停留在左上角，但只是在第一和第二个旋转步骤

我想要的旋转步骤是：

我也希望它的规模以及根据屏幕大小，我已经做了。对不起，我的描述很简短，但我做了个小动作。正如你所看到的第三步和第四步，图像是从画布上取下的，这是错误的

执行转换的代码区域为：

function rotate() {

    ctx.clearRect(0, 0, cDimensions.width, cDimensions.height);

    ctx.translate(pasteH,0); 

    ctx.rotate(90 * Math.PI / 180);

    pasteImage();

}   

---

非常感谢您的帮助。

您走对了道路

• 首先平移到希望旋转点所在的位置（在本例中为0,0）。由于默认画布旋转点为0,0，因此此步骤在您的情况下是可选的

• 接下来通过4个旋转：0，PI/2，PI，PI*1.5旋转画布

• 最后，使用所需的适当偏移量绘制图像（以将图像拉到0,0为例）

以下是一个阵列，其中包含4次旋转所需的角度和偏移：

var rotations=[];
rotations.push({angle:0,offsetX:0,offsetY:0});
rotations.push({angle:PI/2,offsetX:0,offsetY:-img.height});
rotations.push({angle:PI,offsetX:-img.width,offsetY:-img.height});
rotations.push({angle:PI*1.5,offsetX:-img.width,offsetY:0});

---

这里有一个演示：

这是一篇关于画布旋转的精彩文章：。这可能会有帮助，谢谢-我需要复习一下我的数学！