HTML canvas映像裁剪

標籤：str   img   位置   寬度   height   開始   如何   未使用   遇見   

canvas drawImage方法的映像裁剪理解可能會比較耗時，記錄一下，以便供人翻閱！

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

這句話的執行過程可以這麼理解：

　　首先是繪製一幅映像，這幅映像的寬和高就是映像實際的寬和高！

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

　　這樣圖片就裁剪好了，然後就是放到畫布上。如何放置，請繼續看下去... ...

　　後四個參數，實際上是在畫布中開闢一個地區，用於放置裁剪下來的映像！

　　正常來說應該映像應該是充滿整個地區的，奇葩的是偶爾會遇見映像不充滿的情況，理解如下：

　　　　僅僅是一個地區，並不代表映像的實際大小，如果映像小，可能會有一部分空白（即未使用），如果大，則不會超出去！

HTML canvas映像裁剪