在画布中翻转精灵

Question

我正在使用画布来显示一些精灵，我需要水平翻转一个（使其面向左侧或右侧）。但是，我看不到任何使用 drawImage 的方法。

这是我的相关代码：

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

如您所见，我使用drawImage 方法将我的精灵绘制到画布上。翻转我能看到的精灵的唯一方法是翻转/旋转整个画布，这不是我想要做的。

有没有办法做到这一点？或者我需要制作一个面向另一个方向的新精灵并使用它吗？

Answer 1

您可以在不翻转整个画布的情况下转换画布绘图上下文。

c.save();
c.scale(-1, 1);

将反映上下文。绘制你的图像，然后

c.restore();

你又可以正常画了。欲了解更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

Answer 2

虽然 Gaurav 展示了在画布中翻转精灵的技术方法...

不要为您的游戏这样做。

改为制作第二张图片（或使您当前的图片更大），它是恶意表单的翻转版本。 “翻转上下文并绘制图像”与“仅绘制图像”之间的性能差异可能很大。在 Opera 和 Safari 中，翻转画布会导致绘制速度慢十倍，而在 Chrome 中则慢两倍。示例见this jsPerf。

预先计算翻转的精灵总是更快，在游戏中画布性能真的很重要。

Answer 3

使用它来翻转你的精灵表 http://flipapicture.com/