在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] );
}