Поворот изображения на холсте 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] );
}