上旋转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]); 
}