HTML Canvas：如何绘制翻转/镜像图像？ [英] HTML Canvas: How to draw a flipped/mirrored image?

问题描述

当我在HTML画布上绘制图片时，我试图翻转/镜像图片;我发现一个游戏教程显示一个角色每个方向一个角色必须面对，但这似乎不对我很好:(特别是因为每个框架有不同的大小。

I'm trying to flip/mirror an image as I paint it on an HTML canvas; I found a game tutorial showing a sprite sheet per direction a character has to face, but this doesn't seem quite right to me :( Especially since each frame has a different size.

在一些游戏引擎（如cocos2D）中，我记得使用像flipX这样的方法，这种方法只是在相反的方向绘制玩家（它是我的目标，试图做一些基本的平台游戏）。

In some game engines (like cocos2D), I remember using methods like "flipX" which would simply draw the "player" looking in the opposite direction (it's my target, trying to make some basic platformer).

我尝试调用setScale（-1,1

I tried to call the setScale(-1,1); on my canvas with no success. Maybe that isn't meant for this.

感谢：）

推荐答案

1. 您可以通过使用

1. You can do this by transforming the context with myContext.scale(-1,1) before drawing your image, however

这会减慢你的游戏。这是一个更好的主意，有一个单独的，颠倒的sprite。

This is going to slow down your game. It's a better idea to have a separate, reversed sprite.

这篇关于HTML Canvas：如何绘制翻转/镜像图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！