如何在画布中旋转一张图像?

问题描述

我正在制作一个 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)
}

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