上旋轉HTML5畫布

Question

我想在HTML5畫布像這樣旋轉圖像的圖像：http://webutils.co.uk/code/awc-image-rotater

有沒有人有一個想法，我怎麼能做到這一點？

我一直在試圖像這樣：

ctx3.drawImage(img3, -235, -142, 128, 128); 
ctx3.translate(151, 142); 
ctx3.rotate(90 * Math.PI/180); 

但實際上沒有履行我的要求。任何幫助將深表謝意。

Answer 1

您需要在繪製圖像之前做之前的翻譯和旋轉。您將上下文設置爲旋轉和翻譯的位置，然後在翻譯和旋轉的狀態下執行繪圖。

您可以在您鏈接到看到的例子：

this._rotate_canvas(deg, [Tx, Ty]); 
this._context.drawImage(this._img_copy, this._overflow_x, this._overflow_y, this._image_width, this._image_height); 

_rotate_canvas: function(deg, aPoint) 
{ 
    this._context.translate(aPoint[0], aPoint[1]); 
    this._context.rotate(this.deg2rad(deg)); 
    this._context.translate(-aPoint[0], -aPoint[1]); 
}