我正在尝试在 HTML 画布上绘制图像时翻转/镜像图像；我找到了一个游戏教程，显示了角色必须面对的每个方向的精灵表，但这对我来说似乎不太合适。特别是因为每个帧都有不同的大小。
达到这个目标的最佳技术是什么？
我试图setScale(-1, 1);在我的画布上调用，但没有成功。也许这不是为了这个。
谢谢
HTML Canvas：如何绘制翻转/镜像图像？
IT技术
javascript
html
canvas
flip
mirror
2021-03-12 11:44:04
4个回答
您可以通过
myContext.scale(-1,1)在绘制图像之前转换上下文来做到这一点，但是这会减慢你的游戏速度。拥有一个单独的反向精灵是一个更好的主意。
您需要设置画布的比例以及反转宽度。
drawToCanvas : function(v, context, width, height){
context.save();
context.scale(-1, 1);
context.drawImage(v, 0, 0, width*-1, height);
context.restore();
}
这可能存在一些性能问题，但对我来说这不是问题。
在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();
创建反射时不需要重新绘制整个图像。原始反射仅显示图像的底部。通过这种方式，您可以重新绘制图像的较小部分，从而提供更好的性能，而且您不需要创建线性渐变来隐藏图像的下部（因为您从未绘制过它）。
var img = new Image();
img.src = "//vignette2.wikia.nocookie.net/tomandjerryfan/images/9/99/Jerry_Mouse.jpg/revision/latest?cb=20110522075610";
img.onload = function() {
var thumbWidth = 250;
var REFLECTION_HEIGHT = 50;
var c = document.getElementById("output");
var ctx = c.getContext("2d");
var x = 1;
var y = 1;
//draw the original image
ctx.drawImage(img, x, y, thumbWidth, thumbWidth);
ctx.save();
//translate to a point from where we want to redraw the new image
ctx.translate(0, y + thumbWidth + REFLECTION_HEIGHT + 10);
ctx.scale(1, -1);
ctx.globalAlpha = 0.25;
//redraw only bottom part of the image
//g.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(img, 0, img.height - REFLECTION_HEIGHT, img.width, REFLECTION_HEIGHT, x, y, thumbWidth, REFLECTION_HEIGHT);
// Revert transform and scale
ctx.restore();
}; body {
background-color: #FFF;
text-align: center;
padding-top: 10px;
}<canvas id="output" width="500" height="500"></canvas>其它你可能感兴趣的问题