在畫布中以角度繪製圖像而不旋轉畫布

Question

我在JavaScript中使用畫布在HTML 5中繪製圖像。我需要以旋轉的角度畫出它。我知道這可以通過使用畫布上下文應用旋轉（角度）函數來完成。但我需要這樣做而不旋轉畫布本身。

如果可能的話，請提出可能的方法。

Answer 1

實際上，您可以繪製任何想要旋轉到屏幕外的畫布並將其繪製到主畫布中。我借了從谷歌IO對話驗證碼：

rotobj = rotateAndCache(myimg,myangle) 

，並在您drawcode：

rotateAndCache = function(image,angle) { 
    var offscreenCanvas = document.createElement('canvas'); 
    var offscreenCtx = offscreenCanvas.getContext('2d'); 

    var size = Math.max(image.width, image.height); 
    offscreenCanvas.width = size; 
    offscreenCanvas.height = size; 

    offscreenCtx.translate(size/2, size/2); 
    offscreenCtx.rotate(angle + Math.PI/2); 
    offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2)); 

    return offscreenCanvas; 
} 

然後緩存它

mycontext.drawImage(rotobj,x_coord,y_coord) 

，如果你有一個對象這是唯一有用的它只旋轉一次角度，隨後僅進行變換。

Answer 2

這是不可能的，你可能不需要它。試試這個：

context.save() // Save current state (includes transformations) 
context.rotate() 
... draw image ... 
context.restore() // Restore state 

Answer 3

當您在畫布上應用轉換時，您不會旋轉畫布。你只是告訴你所有你將要畫的東西都會以特定的方式轉變。如果要避免轉換影響其他命令，請使用save()和restore()方法。它們允許保存和恢復畫布的設置。

ctx.save(); 
ctx.rotate(30); 
ctx.drawImage(); 
ctx.restore(); 

Answer 4

我已經upvoted @ PeterT--偉大的片段和運作良好 - 謝謝你！我必須做出3個小改變才能使它適用於我：

1.寬度和高度的最大值不夠：如果考慮旋轉正方形，則需要一個直徑爲對角線的圓的廣場（var diam）。
2.畫布需要翻回（或使用保存/恢復）。
3.對象的x和y座標必須根據畫布大小進行調整。

所以我結束了：

rotateAndCache = function(image,angle) { 
     var offscreenCanvas = document.createElement('canvas'); 
     var offscreenCtx = offscreenCanvas.getContext('2d'); 

     var size = Math.max(image.width, image.height); 
     var diam = 2*((size/2)*Math.sqrt(2));     // needs to be saved 
     offscreenCanvas.width = diam; 
     offscreenCanvas.height = diam; 

     offscreenCtx.translate(diam/2, diam/2); 
     offscreenCtx.rotate(angle); 
     offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2)); 
     offscreenCtx.translate(-diam/2, -diam/2); 

     return offscreenCanvas; 
} 

和調整戰平位置（需要保存在rotateAndCache）：
mycontext.drawImage(rotobj,x-(diam-width)/2,y-(diam-height)/2);