在HTML5画布上旋转图片 [英] Rotate an image on HTML5 canvas
本文介绍了在HTML5画布上旋转图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要在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屋!
查看全文