Javascript 如何在画布中旋转一张图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7496674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to rotate one image in a canvas?
提问by Razor Storm
I am making an HTML5 canvas game, and I wish to rotate one of the images.
我正在制作一个 HTML5 画布游戏，我希望旋转其中一个图像。
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?
我想旋转这张图片。旋转图像的标准方法是在画布上下文对象上设置旋转。但是，这会旋转整个游戏！我不想这样做，只想旋转这个精灵。我怎么做？
回答by pimvdb
Use .save()and .restore()(more information):
使用.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)
}
回答by Carb0n1c
You might want to put a translate();there because the image is going to rotate around the origin and that is in the top left corner by default so you use the translate();to change the origin.
您可能想要在translate();那里放置一个，因为图像将围绕原点旋转，并且默认情况下位于左上角，因此您可以使用translate();来更改原点。
link.onload=function(){
ctx.save();
ctx.translate(x, y); // change origin
ctx.rotate(Math.PI);
ctx.drawImage(link,-10,-10,10,10);
ctx.restore()
}
回答by Carb0n1c
Here i made a working example from one of my games. u can get the image from Here.
在这里，我从我的一个游戏中制作了一个工作示例。你可以从这里得到图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Test</title>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
var play = setInterval('Rotate()',16);
var i = 0;
var shipImg = new Image();
shipImg.src = 'ship.png';
function Rotate() {
ctx.fillStyle = '#000';
ctx.fillRect(0,0,100,100);
ctx.save();
ctx.translate(50, 50);
ctx.rotate(i / 180 / Math.PI);
ctx.drawImage(shipImg, -16, -16);
ctx.restore();
i += 10;
};
</script>
</body>
</html>
回答by Doorknob
Your original "solution" was:
您原来的“解决方案”是：
ctx.save();
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.translate(-x, -y);
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.restore();
However, it can be made more efficient (with no saveor restore) by using this code:
但是，使用以下代码可以使其更高效（不使用save或restore）：
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.rotate(this.angle - Math.PI/2.0);
ctx.translate(-x, -y);
回答by Anatoliy Aksenov
Look at my solution. It's full example and the easiest to understand.
看看我的解决方案。这是完整的例子，也是最容易理解的。
var drawRotate = (clockwise) => {
const degrees = clockwise == true? 90: -90;
let canvas = $('<canvas />')[0];
let img = $(".img-view")[0];
const iw = img.naturalWidth;
const ih = img.naturalHeight;
canvas.width = ih;
canvas.height = iw;
let ctx = canvas.getContext('2d');
if(clockwise){
ctx.translate(ih, 0);
} else {
ctx.translate(0, iw);
}
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(img, 0, 0);
let rotated = canvas.toDataURL();
img.src = rotated;
}
回答by Razor Storm
I ended up having to do:
我最终不得不这样做：
ctx.save();
ctx.translate(x,y);
ctx.rotate(-this.angle + Math.PI/2.0);
ctx.translate(-x, -y);
ctx.drawImage(this.daggerImage,x,y,20,20);
ctx.restore();
