在HTML5画布上旋转图片 [英] Rotate an image on HTML5 canvas

问题描述

我要在HTML5画布上旋转图片，如下所示： http：// webutils。 co.uk/code/awc-image-rotater

I want to rotate an image on HTML5 canvas like this: http://webutils.co.uk/code/awc-image-rotater

有没有人知道我该怎么做？

Does anyone have an idea how I can do this?

我一直在试着这样：

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

但真的没有满足我的要求。

But really not fulfilling my requirement. Any help will deeply appreciated.

推荐答案

您需要在之前进行翻译和旋转图片。

您可以在示例中看到您链接到：

You can see in the example that you linked to:

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

这篇关于在HTML5画布上旋转图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！