翻转画布中的精灵 [英] Flip a sprite in canvas

问题描述

我使用canvas来显示一些sprite，我需要水平翻转一个（因此它面向左或右）。我不能看到任何方法， drawImage 。

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.

这里是我的相关代码：

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 方法将我的sprite绘制到画布上。翻转我能看到的精灵的唯一方法是翻转/旋转整个画布，这不是我想做的。

As you can see, I'm using the drawImage method 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.

有一种方法去做？

推荐答案

你可以转换canvas画布上下文翻转整个画布。

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();

，您可以再次正常绘制。有关详细信息，请参见 https：//developer.mozilla。 org / en-US / docs / Web / Guide / HTML / Canvas_tutorial / Transformations

and you can draw normally again. For more information, see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

这篇关于翻转画布中的精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！