Javascript HTML Canvas：如何绘制翻转/镜像图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8168217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Canvas: How to draw a flipped/mirrored image?
提问by Jem
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.
我正在尝试在 HTML 画布上绘制图像时翻转/镜像图像；我找到了一个游戏教程，显示了角色必须面对的每个方向的精灵表，但这对我来说似乎不太合适。特别是因为每个帧都有不同的大小。
What would be the best technique to reach this goal?
达到这个目标的最佳技术是什么？
I tried to call the setScale(-1, 1);on my canvas with no success. Maybe that isn't meant for this.
我试图setScale(-1, 1);在我的画布上调用，但没有成功。也许这不是为了这个。
Thanks
谢谢
采纳答案by Phrogz
You can do this by transforming the context with
myContext.scale(-1,1)before drawing your image, howeverThis is going to slow down your game. It's a better idea to have a separate, reversed sprite.
您可以通过
myContext.scale(-1,1)在绘制图像之前转换上下文来做到这一点，但是这会减慢你的游戏速度。拥有一个单独的反向精灵是一个更好的主意。
回答by digitaltag
You need to set the scale of the canvas as well as inverting the width.
您需要设置画布的比例以及反转宽度。
drawToCanvas : function(v, context, width, height){
context.save();
context.scale(-1, 1);
context.drawImage(v, 0, 0, width*-1, height);
context.restore();
}
There are probably some performance issues with this but for me that was not an issue.
这可能存在一些性能问题，但对我来说这不是问题。
回答by Le____
Add this piece of code before the drawImage. If you just flip it horizontally it will get off of bounds... so use translateto adjust its position:
在drawImage. 如果你只是水平翻转它会越界......所以translate用来调整它的位置：
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
回答by jerry
You don't need to redraw the entire image when creating a reflection. An original reflection simply shows the bottom part of the image. This way you are redrawing a smaller part of the image which provides better performance and also you don't need to create linear gradient to hide the lower part of the image (since you never draw it).
创建反射时不需要重新绘制整个图像。原始反射仅显示图像的底部。通过这种方式，您可以重新绘制图像的较小部分，从而提供更好的性能，而且您无需创建线性渐变来隐藏图像的下部（因为您从未绘制过它）。
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>