canvas 旋转后截图和缩放

 上次说了，当一个图片旋转的时候，画布必须为一个正方形，这样旋转的时候，图片就不会被截取掉。但是这样的话就造成了另一个问题，就是画布中有空白的区域。这篇文章，我们就来解决空白区域的问题。

 首先介绍一个函数：getImageData(x,y,w,h)得到画布特定区域的图片信息。参数 分别指的是画布起始点的x轴和y轴，区域的高度和宽度。

 另一个函数：putImageData(imageData,x,y,dx,dx,dw,dh) 将得到的图像数据放入画布中。

 当图片（长方形）旋转的时候的，图片在画布中的位置是变化的。

正常： 90度：180度： 270度：

刚才是宽度大于高度的情况，下面是宽度小于高度的情况。

正常： 90度： 180度： 270度：

看上面的把张图片，我们可以看出图片不一样的，需要截取的位置就不一样。一般来说就有两种情况：宽度大于高度，宽度小于高度。我们要根据特定的情况，来获得位置。

得到数据以后，后面的工作就简单了。

不过还有一种情况，是必须要考虑的，就是图片的尺寸大于屏幕的尺寸。这种情况下，我们就必须把图片进行一些缩放。缩放时候，我们用到了drawImage这个函数。我们首先来看看这个函数。drawImage(image,sx,sh,sw,sh,dx,dy,dh,dw)。

当dh、dw大于sh、sw，那么图片就会被缩小，反之就会被放大。