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

【问题标题】：Rotating an image in canvas keeping to the top left旋转画布中的图像保持在左上角
【发布时间】：2014-05-03 16:03:33
【问题描述】：

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

我想要的旋转步骤是：

我还希望它能够根据我已经完成的屏幕尺寸很好地缩放。对不起，简短的描述，但我做了一个小提琴。正如您看到的第 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();

}

非常感谢任何帮助。

【问题讨论】：

这是一篇关于画布旋转的精彩文章：codetheory.in/…。它可能会有所帮助

标签： javascript html canvas

【解决方案1】：

你在正确的轨道上！

首先转换到您希望旋转点所在的位置（在您的情况下为 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});

这是一个演示：http://jsfiddle.net/m1erickson/ryA8f/

【讨论】：

谢谢 - 我需要复习我的数学！