Javascript 在画布上翻转精灵

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

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

this.idleSprite=newimage（）；
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=函数（）{
如果（this.state==“空闲”）{
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）；
如果（this.idleSprite.frameCount

如您所见，我正在使用

drawImage

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

---

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

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

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

将反映上下文。然后画你的图像

c.restore();

---

你可以再正常画画了。有关更多信息，请参见

，而Gaurav展示了在画布中翻转精灵的技术方法

不要在游戏中这样做。

取而代之的是制作第二张图片（或者放大当前图片），这是一张翻页的图片。“翻转上下文并绘制图像”与“仅绘制图像”之间的性能差异可能很大。在Opera和Safari中，翻转画布会导致绘图速度慢十倍，而在Chrome中则慢两倍。有关示例，请参见

---

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

用这个来翻转精灵表

---

谢谢。我最后做的是在我现有的一个精灵（在它下面）上添加另一个精灵，让我的角色以另一种方式运行，并根据方向添加一些代码来使用这组精灵。像这样：看起来不错！虽然我会重新排列新行：垂直排列每一行的翻转版本，因此翻转时唯一需要更改的是y坐标。Gaurav的答案实际上是由于ctx.save/restore而导致的性能损失。事实上，如果您每次只调用ctx.scale（…），有趣的是，翻转的版本绘制速度更快：。（如果对翻转的情况调用ctx.scale（-1），而对非翻转的情况调用ctx.scale（-1），速度会更快。）Jeff您提出了一个很好的观点，即

save

和

restore

是不必要的，但您的结果是侥幸得到的，请立即查看结果。在浏览器加载完页面或Java（用于计时器）之前，您可能已经开始了测试。我认为测试在

/4

处不准确，因为翻转所需的工作还必须包括将转换返回到正常状态的工作。这意味着至少需要第二次调用

ctx.scale（-1,1）

。这里有一个“公平”的测试，在每一个被测试的浏览器和移动设备中，翻转速度都比较慢，有时甚至非常慢：我曾想过。scale（）设置转换比例，而不是将其相乘。乘法是w3.org文档（）中暗示的，它确实会使test/4无效。（它使用的术语“add”有点含糊不清）。然而，这似乎不是它要做的，至少在chrome上是这样：。谢谢！但是由于Simon的回答，我将使用他的技术。我会将您的答案标记为已接受的答案，尽管它回答了我的问题：）不幸的是，这不支持PNG：(