在畫布上多次翻轉和鏡像圖像

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

這是示例代碼和演示：

 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>