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

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.scale(-1,1); 
  

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

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

这里的示例代码和演示：

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); 
 
    } 
 
}

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

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