在画布上多次翻转和镜像图像

Question

我正在尝试制作一个马赛克和图像克隆，它们互相翻转和镜像。

但我无法让它正常工作。我有这个JSFiddle： http://jsfiddle.net/arpo/yafLg7dc/

我希望每一秒钟都会翻转第一个，依此类推。

但是当我改变价值观时，我认为马赛克会被搞砸了。这是我希望应该起作用但不起作用的价值观。

_drawImg(img, ctx, x1, y1, w, h, false, false);
_drawImg(img, ctx, x2, y1, w, h, true, false);
_drawImg(img, ctx, x1, y2, w, h, false, true);
_drawImg(img, ctx, x2, y2, w, h, true, true);

Answer 1

水平翻转图像（从左到右）涉及：

• 翻译到图片的水平中间位置。这将旋转点设置为图像的水平中间。它通过将画布的[0,0]原点水平移动到图像的中间来实现这一点。

  context.translate(x+img.width/2,0);
  

• 使用缩放水平翻转图像。这会导致图像被绘制为自身的水平镜像。

  context.scale(-1,1);
  

• drawImage 图片偏移图片宽度的一半。此偏移是必要的，因为context.translate已将[0,0]移动到图像的中点，因此必须向左拉动图像，以便在所需的X位置绘制图像。

  context.drawImage(img,-img.width/2,y);
  

以下是示例代码和演示：

＆＃13;

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/car1.png";
function start(){
  drawImageExtended(img,50,50);
  drawImageExtended(img,50,92,true);
}

function drawImageExtended(img,x,y,flipHorizontally){
  if(flipHorizontally){
    ctx.translate(x+img.width/2,0);
    ctx.scale(-1,1);
    ctx.drawImage(img,-img.width/2,y);
  }else{
    ctx.drawImage(img,x,y);
  }
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red;}

＆＃13;

<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

＆＃13;

＆＃13;