HTML canvas图像裁剪

canvas drawImage方法的图像裁剪理解可能会比较耗时，记录一下，以便供人翻阅！

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

这句话的执行过程可以这么理解：

　　首先是绘制一幅图像，这幅图像的宽和高就是图像实际的宽和高！

　　然后开始裁剪，sx   sy是裁剪的起始位置，swidth和sheight是裁剪的高度和宽度，注意限制一下最大值，不要超出图片的高度和宽度；

　　这样图片就裁剪好了，然后就是放到画布上。如何放置，请继续看下去... ...

　　后四个参数，实际上是在画布中开辟一个区域，用于放置裁剪下来的图像！

　　正常来说应该图像应该是充满整个区域的，奇葩的是偶尔会遇见图像不充满的情况，理解如下：

　　　　仅仅是一个区域，并不代表图像的实际大小，如果图像小，可能会有一部分空白（即未使用），如果大，则不会超出去！

转载于:https://www.cnblogs.com/tengpan-cn/p/6274497.html