將畫布中的圖像旋轉到左上方

Question

我正在嘗試在畫布內旋轉圖像，但將圖像保持在左上方。 我設法使其保持在左上方，但僅在第一和第二旋轉步驟上。

我想要的輪換步驟是：

我還希望它能根據我已經完成的屏幕尺寸進行適當縮放。 對不起，簡短的描述，但我已經做了一個小提琴。 如您所見，第3步和第4步是從畫布上取走圖像，這是錯誤的。

這是小提琴：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/