旋转3d javascript精灵

旋转3d javascript精灵,javascript,canvas,Javascript,Canvas,我有一个图像精灵,包括我的角色(游戏英雄)的8帧,该画面向右旋转。我想让那个英雄在左击时向左转。现在它一直在向右转。我在2d画布上下文中绘制图像,如下所示: ctx.translate(x, y); // TODO - here I need to rotate it in 3d // ctx.rotate(); ctx.translate(-x,-y); ctx.drawImage(i, cycle * spriteW, 0, spriteW, spriteH, x, y, spriteW,

我有一个图像精灵,包括我的角色(游戏英雄)的8帧,该画面向右旋转。我想让那个英雄在左击时向左转。现在它一直在向右转。我在2d画布上下文中绘制图像,如下所示:

ctx.translate(x, y);
// TODO - here I need to rotate it in 3d
// ctx.rotate();
ctx.translate(-x,-y);

ctx.drawImage(i, cycle * spriteW, 0, spriteW, spriteH, x, y, spriteW, spriteH);
ctx.restore();

是否可以使用2d上下文旋转它,或者我需要更改一些逻辑?

我想您正在寻找这个
ctx.scale(-1,1)。但最好在游戏加载时加载翻转版本的精灵,并在左右精灵之间切换。这比翻转雪碧快。

谢谢。规模并没有真正适合我。也许我用错了。但我使用了你建议的第二种方法——我加载了翻转排列,效果很好。再次感谢。你忘了翻译,如果你关心性能,不要存储+获取新图像,而是在屏幕外画布上的应用程序初始生成翻转版本。