在 HTML5 画布上旋转图像

发布于 2024-11-02 18:04:26 字数 349 浏览 0 评论 0原文

我想在 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);

但确实没有达到我的要求。任何帮助将不胜感激。

原文

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?

I have been trying like 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哭了丶谁疼 2024-11-09 18:04:26

您需要在绘制图像之前进行平移和旋转。您将上下文设置为其旋转和平移位置，然后在该平移和平移状态下进行绘图。

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

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

You need to do the translation and rotation before you draw the image. You set the context to its rotated and translated position, then you do the drawing in that translated and rotated state.

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

回复收藏 0 原文

~没有更多了~