canvas复制粘贴、旋转复制实践上面的3个图片分别是，1旋转复制到2，然后添加黄色块，再旋转复制到3。内容就这么多了

最近工作上需要写一个签名的功能，但是横着签名完，需要翻转90度传给后台的功能，把自己绕晕了，特此写文章记录

多次翻转容易把人绕晕，所以我写了下面这个demo，希望能帮助大家理解，以下demo的宽高分别是600px、300px；下面就开始我们的翻转之旅吧！

上面的3个图片分别是，1旋转复制到2，然后添加黄色块，再旋转复制到3。

那么，从1到2，是怎么实现复制粘贴的呢，直接旋转还是复制？具体要怎么做，请看下面的思路：首先将1跟2两个长方形利用四个角进行排序，1到2对应四个角的排序如下：

从图中就很清晰的可以看出每个角对应的位置了，那么接下来就是让左边块（需要复制的块）的1移动到右边块（粘贴的块）的1这个位置了，

copyCtx.translate(0, 300);

这里因为粘贴块的高是300，所以这里用了translate进行移动，移动后的图片，我们可以想象成下面这样子：

接下来要怎么办呢，当然是选择旋转了，只要逆时针旋转90度，就是我们要的粘贴内容了

旋转后进行绘图，再加上黄色块，就可以得到粘贴块的内容了

copyCtx.rotate(-90 * Math.PI / 180);
copyCtx.drawImage(img, 0, 0, 300, 600);
copyCtx.fillStyle="yellow";
copyCtx.fillRect(0,0,100,50);

那么问题来了，为什么要画个黄色块呢？

这里我是想告诉大家，通过移动，旋转之后，这个粘贴块的内容他的画布上的（0，0）坐标，是1对应的位置，如果你还需要加东西，可以选择重置，如下代码：

copyCtx.setTransform(1, 0, 0, 1, 0, 0);

上面第二块复制到第三课的思路也是一样的，下面是我的全部代码的实现：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.canvas1, .canvas2, .canvas3 {
			display: inline-block;
		}
		.canvas1 {
			width: 300px;
			height: 600px;
			margin-right: 20px;
			border: 1px solid #CCC;
		}
		.canvas2 {
			width: 600px;
			height: 300px;
			border: 1px solid #CCC;
			margin-right: 20px;
		}
		.canvas3 {
			width: 300px;
			height: 600px;
			border: 1px solid #CCC;
		}
	</style>
</head>
<body>
<canvas class="canvas1" width="300" height="600" id="canvas1"></canvas>
<canvas class="canvas2" width="600" height="300" id="canvas2"></canvas>
<canvas class="canvas3" width="300" height="600" id="canvas3"></canvas>
<script type="text/javascript">
	var c = document.getElementById("canvas1");
	var ctx = c.getContext("2d");
	ctx.rotate(0*Math.PI/180);
	ctx.fillRect(100,20,100,50);
	ctx.fillRect(100,400,100,50);
	ctx.translate(100, 20);
	ctx.rotate(45*Math.PI/180);
	ctx.fillRect(0,0,100,50);
	function copyCanvas() {
    // 复制粘贴图片，为了把图片旋转回来
    let mycanvas = document.getElementById('canvas2');
    let copyCtx = mycanvas.getContext('2d');
    let img = new Image();
    img.onload = () => {
      copyCtx.translate(0, 300);
      copyCtx.rotate(-90 * Math.PI / 180);
      copyCtx.drawImage(img, 0, 0, 300, 600);
      // copyCtx.setTransform(1, 0, 0, 1, 0, 0); // 有这句话跟没这句话，黄色块表现不一样哦
      copyCtx.fillStyle="yellow";
      copyCtx.fillRect(0,0,100,50);
      copyCanvas2();
    };
    img.src = document.getElementById('canvas1').toDataURL();
  };
  copyCanvas();
  function copyCanvas2() {
    // 复制粘贴图片，为了把图片旋转回来
    let mycanvas = document.getElementById('canvas3');
    let copyCtx = mycanvas.getContext('2d');
    let img = new Image();
    img.onload = () => {
      copyCtx.translate(300, 0);
      copyCtx.rotate(90 * Math.PI / 180);
      copyCtx.drawImage(img, 0, 0, 600, 300);
    };
    img.src = document.getElementById('canvas2').toDataURL();
  };
</script>
</body>
</html>

内容就这么多了，希望这篇能帮助到大家。