HTML Canvas:如何绘制翻转/镜像图像？

Question

当我在HTML画布上绘制图像时,我正在尝试翻转/镜像图像; 我找到了一个游戏教程,显示角色必须面对的每个方向的精灵表,但这对我来说似乎不太合适:(特别是因为每个帧都有不同的大小.

在一些游戏引擎(比如cocos2D)中,我记得使用像"flipX"这样的方法,它只是简单地画"朝向相反方向的玩家"(这是我的目标,试图制作一些基本的平台游戏).

达到这个目标的最佳技术是什么？

我试着调用setScale(-1,1); 在我的画布上没有成功.也许这不是为了这个.

谢谢 :)

Answer 1

1. 但是,您可以通过myContext.scale(-1,1)在绘制图像之前转换上下文来完成此操作

2. 这会减慢你的游戏速度.拥有一个单独的反向精灵是个更好的主意.

Answer 2

您需要设置画布的比例以及反转宽度.

下面的功能是我的一个项目的摘录.调用该函数时,它会从网络摄像头源中获取一帧,放入画布并水平翻转图像.

drawToCanvas : function(v, context, width, height){
    context.save();
    context.scale(-1, 1);
    context.drawImage(v, 0, 0, width*-1, height);
    context.restore();
}

这可能有一些性能问题,但对我来说这不是问题.

Answer 3

在drawImage. 如果你只是水平翻转它会越界......所以translate用来调整它的位置：

ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);

如果您想稍后恢复上下文，请添加save/restore：

ctx.save();
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0);
ctx.restore();