在画布中旋转图像保持在左上角

Question

我正在尝试在画布内旋转图像，但将图像保持在左上角。我设法让它保持在左上角，但仅限于第一和第二个旋转步骤。

我想要的轮换步骤是：

我还希望它能够很好地扩展，具体取决于我已经完成的屏幕尺寸。对不起，简短的描述，但我做了一个小提琴。正如您所看到的那样，第3步和第4步将图像从画布中取出，这是错误的。

Here is the fiddle: http://jsfiddle.net/jNWT5/1/

执行转换的代码区域是：

function rotate() {

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

    ctx.translate(pasteH,0); 

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

    pasteImage();

}   

非常感谢任何帮助。

Answer 1

您已走上正轨！

• 首先转换到您想要旋转点的位置（在您的情况下为0,0）。由于默认画布旋转点为0,0因此，在您的情况下，此步骤是可选的。

• 接下来将画布旋转4圈：0，PI / 2，PI，PI * 1.5。

• 最后使用您想要的适当偏移量绘制drawImage（在您的情况下将图像拉到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});

下载演示：http://jsfiddle.net/m1erickson/ryA8f/