繪製圖片drawImage

本文屬於《html5 Canvas畫圖系列教程》

這裡的繪製圖片是指把一張現成的圖片，繪製到Canvas上面。

有的人可能就有疑問了，既然是現成的圖片，那幹嘛用canvas來繪製，直接用img標籤展現出來不就行了？

canvas上繪製圖片，不是用來展示的，canvas功能更強大，比如，把圖片畫到canvas上，可以像PS中的濾鏡一樣，對圖片進行修改，而且最後還能儲存為新圖片。

這些操作很複雜，我們先來看最基本的：如何把圖片繪製到canvas上？

canvas中有個現成的繪製圖片的方法即drawImage，他的語法如下：

drawImage(image, x, y)

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了？

答案是否定的，這樣做只會報錯。