如何在画布中旋转一个图像？ [英] How to rotate one image in a canvas?

问题描述

我正在制作一个HTML5画布游戏，我希望旋转其中一个图像。

I am making an HTML5 canvas game, and I wish to rotate one of the images.

var link = new Image();
link.src='img/link.png';
link.onload=function(){
    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger
}

我希望旋转此图像。旋转图像的标准方法是在画布上下文对象上设置旋转。但是，这会旋转整个游戏！我不想这样做，只希望旋转这一个精灵。我该怎么做？

I wish to rotate this image. The standard way of rotating image was to set a rotation on the canvas context object. However, that rotates the entire game! I don't want to do that, and only wish to rotate this one sprite. How do I do that?

推荐答案

使用 .save（）和 .restore（）（更多信息）：

link.onload=function(){
    ctx.save(); // save current state
    ctx.rotate(Math.PI); // rotate
    ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger
    ctx.restore(); // restore original states (no rotation etc)
}

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