canvas drawImage方法的图像裁剪理解可能会比较耗时，记录一下，以便供人翻阅！
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
这句话的执行过程可以这么理解：
首先是绘制一幅图像，这幅图像的宽和高就是图像实际的宽和高！
然后开始裁剪，sx sy是裁剪的起始位置，swidth和sheight是裁剪的高度和宽度，注意限制一下最大值，不要超出图片的高度和宽度；
这样图片就裁剪好了，然后就是放到画布上。如何放置，请继续看下去... ...
后四个参数，实际上是在画布中开辟一个区域，用于放置裁剪下来的图像！
正常来说应该图像应该是充满整个区域的，奇葩的是偶尔会遇见图像不充满的情况，理解如下：
仅仅是一个区域，并不代表图像的实际大小，如果图像小，可能会有一部分空白（即未使用），如果大，则不会超出去！