canvas 2.0 圖片繪制
繪制圖片drawImage
2013.02.21 by本文屬於《html5 Canvas畫圖系列教程》
這裏的繪制圖片是指把一張現成的圖片，繪制到Canvas上面。
有的人可能就有疑問了，既然是現成的圖片，那幹嘛用canvas來繪制，直接用img標簽展現出來不就行了？
canvas上繪制圖片，不是用來展示的，canvas功能更強大，比如，把圖片畫到canvas上，可以像PS中的濾鏡一樣，對圖片進行修改，而且最後還能保存為新圖片。
這些操作很復雜，我們先來看最基本的：如何把圖片繪制到canvas上？
canvas中有個現成的繪制圖片的方法即drawImage，他的語法如下：
drawImage
drawImage(image, x, y, width, height)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
你沒有看錯，drawImage就是有三種語法，越來越復雜。我們要由淺入深的學習：
1，drawImage(image, x, y)
這是最簡單的使用方式。繪制圖片嘛，當然要有一張“圖”，image參數就是圖——這個圖可以是一張圖片，也可以是另外一個canvas元素，記住！！
然後x,y就是canvas上的坐標，表示你要把圖片畫在哪個位置，這個不用多說。
這種使用方法，繪制的圖片是原始大小
2，drawImage(image, x0，0, y, width, height)
如果只能把圖片按原始大小繪制，那也太遜了。我們有時候需要對圖片進行縮放，第2種用法中的width及height參數，即你決定把圖片繪制的高度和寬度。
這個高度與寬度和原始圖片無關，canvas會強制把圖片按這個寬高繪制，如果圖片太小，就會放大；大了則會縮小；比例不對則會變形。跟img的width和height差不多
3，drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第3種用法看起來很嚇人，因為參數太多了，而且參數都是類似的。
大家註意到有一組參數以s開頭，而另一組則以d開頭，這是什麽意思？
s其實是slice的意思，即切割；d你可以理解為draw。
切割的意思是，有時候我們不需要畫出整個圖片——可能一張圖片上只有某個區域是我們想要的，這時候我們可以把想要的那一塊切出來，在繪制到canvas上。
所以，(sx,sy)是原圖片上開始切割的坐標，而(sWidth,sHeight)則是你要切割多寬多高；後面的dx,dy,dWidth,dHeight則與用法2相同。如：
這表示在原圖jpg的10,10的位置開始切割下來一個200*200大小的塊，然後把這塊兒繪制到canvas上40,40的坐標處，並且大小依舊是200*200。
另外，s和d系列的參數，誰應該在前面呢？怎麽才能記住他們的順序？
先切再畫，比先畫再切更省事。畫了再切，不就成了先畫出多余的，又把多余的給切掉，這不是蛋疼嗎？
建議大家自行測試一下dramImage的用法，可以加深印象。
大家測試的時候一定要記住：圖片需要加載完成才能繪制出來。如果你是用JS載入圖片，那你需要把繪制函數加在圖片的onload事件上，才能確保繪制成功。
drawImage註意事項：
如果在原圖上切割的範圍，超出了圖片本身的範圍，會發生什麽？會不會把已有在圖片部分八繪制出來？
答：不會報錯，但圖片完全不會繪制出來，只會繪制一片空白。
最後，drawImage這三種方式，各自的參數個數是不能省略的。比如，我們在第3個使用方式中，打算切割把切割下來的200*200的圖片依然按200*200繪制出來，那麽我們可不可以不填最後那兩個參數呢？是不是就默認200*200了？
答案是否定的，這樣做只會報錯。
canvas 2.0 圖片繪制