在 canvas 上多次翻转和镜像图像

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

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

平移到图片水平居中。这会将旋转点设置为图像的水平中间。它通过将 canvas 的 [0,0] 原点水平移动到图像的中间来实现。
```
context.translate(x+img.width/2,0);
```
使用scale水平翻转图像。这会导致图像被绘制为自身的水平镜像。
```
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>

在 canvas 上多次翻转和镜像图像

Flipping and mirroring an image multiple times on a canvas

javascript

canvas

html5-canvas