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

时间:2011-11-17 13:52:38

标签: javascript html canvas flip mirror

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

实现这一目标的最佳技术是什么?

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

由于

4 个答案:

答案 0 :(得分:27)

  1. 您可以在绘制图片之前使用myContext.scale(-1,1)转换上下文,但

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

答案 1 :(得分:20)

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

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

这可能存在一些性能问题,但对我来说这不是问题。

答案 2 :(得分:1)

创建反射时,您不需要重绘整个图像。原始反射仅显示图像的底部。这样,您可以重新绘制图像的较小部分,从而提供更好的性能,而且您不需要创建线性渐变来隐藏图像的下半部分(因为您从不绘制它)。



 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>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

<button id="aiPlayer" onClick= "location.href='aiGame/aiindex.html'"> Play AI </button> <a href="aiGame/aiindex.html"> Play AI </a> 之前添加这段代码。如果只是水平翻转它,它将越界...所以请使用drawImage来调整其位置:

translate