javascript 在画布中翻转精灵
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7918803/
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
Flip a sprite in canvas
提问by James Dawson
I'm using canvas to display some sprites, and I need to flip one horizontally (so it faces left or right). I can't see any method to do that with drawImage, however.
我使用画布来显示一些精灵，我需要水平翻转一个（所以它面向左或向右）。但是，我看不到任何方法可以做到这一点drawImage。
Here's my relevant code:
这是我的相关代码：
this.idleSprite = new Image();
this.idleSprite.src = "/game/images/idleSprite.png";
this.idleSprite.frameWidth = 28;
this.idleSprite.frameHeight = 40;
this.idleSprite.frames = 12;
this.idleSprite.frameCount = 0;
this.draw = function() {
if(this.state == "idle") {
c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
} else if(this.state == "running") {
c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, 0, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; } else { this.runningSprite.frameCount = 0; }
}
}
As you can see, I'm using the drawImagemethod to draw my sprites to the canvas. The only way to flip a sprite that I can see is to flip/rotate the entire canvas, which isn't what I want to do.
如您所见，我正在使用该drawImage方法将我的精灵绘制到画布上。翻转我能看到的精灵的唯一方法是翻转/旋转整个画布，这不是我想要做的。
Is there a way to do that? Or will I need to make a new sprite facing the other way and use that?
有没有办法做到这一点？或者我是否需要制作一个面向另一种方式的新精灵并使用它？
采纳答案by Gaurav
You can transform the canvas drawing context without flipping the entire canvas.
您可以在不翻转整个画布的情况下转换画布绘图上下文。
c.save();
c.scale(-1, 1);
will mirror the context. Draw your image, then
将反映上下文。画出你的形象，然后
c.restore();
and you can draw normally again. For more information, see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations
又可以正常画画了。有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations
回答by Simon Sarris
While Gaurav has shown the technical way to flip a sprite in canvas...
虽然 Gaurav 展示了在画布中翻转精灵的技术方法......
Do not do this for your game.
不要为您的游戏这样做。
Instead make a second image (or make your current image larger) that is a flipped version of the spite-sheet. The performance difference between "flipping the context and drawing an image" vs "just drawing an image" can be massive. In Opera and Safari flipping the canvas results in drawing that is ten times slower, and in Chrome it is twice as slow. See this jsPerffor an example.
而是制作第二张图像（或放大当前图像），它是恶意表格的翻转版本。“翻转上下文并绘制图像”与“仅绘制图像”之间的性能差异可能很大。在 Opera 和 Safari 中，翻转画布会导致绘制速度慢十倍，而在 Chrome 中则慢两倍。有关示例，请参阅此 jsPerf。
Pre-computing your flipped sprites will always be faster, and in games canvas performance really matters.
预先计算你的翻转精灵总是更快，在游戏中画布性能真的很重要。
回答by Sam Backus
Use this to flip your sprite sheet http://flipapicture.com/
用它来翻转你的精灵表 http://flipapicture.com/
