“小白，canvas繪制圖形功能自己看了么？”

“看了，我自己畫了些圓和線條，還繪制了問題，不過感覺沒什么實用價值?！?/p>

“這些功能對于做圖表還是很有用的，了解一下就可以了，我們今天聊聊canvas在web前端應(yīng)用中最常用的一個功能——重繪外部圖片?！?/p>

“外部圖片直接插入到網(wǎng)頁上不行么？為什么要在canvas中重繪呢？”

老朱說：“假如用戶上傳頭像的時候圖片格式特別大，我們就可以把頭像先在canvas中重繪一下，然后再把重繪好的圖片發(fā)送到服務(wù)器進(jìn)行保存，這樣用戶以后使用頭像的時候，圖片格式就非常小了。從今天開始我們實現(xiàn)一下圖片上傳的功能，你先創(chuàng)建一個空的html文件，然后插入一個canvas標(biāo)簽?！?/p>

小白很快便布局好了，說道：“好了，我還用css控制了canvas的寬度和高度！”

老朱看完以后說道：“在javascript中有一個Image類，他是用來對圖片進(jìn)行操作的類，我們可以通過實例化一個Image對象來做一些圖片的操作，比如：”

“這段代碼實例化了一個img圖片對象，通過img的路徑（src）屬性可是設(shè)置圖片的路徑。在canvas中繪制圖片用到的是drawImage(img,sx,sy,swidth,sheight,x,y,width,height)方法，這里第一個參數(shù)就是圖片對象，sx和sy是裁剪的位置，swidth和sheight是要使用的圖片對象的寬度和高度，x和y是圖片在canvas中的坐標(biāo)位置，width和height是最終顯示的圖片的寬和高。它還有一個重載方法是drawImage(img,x,y），這個方法只考慮圖片對象和x軸y軸?！?/p>

小白有點不明白，說道：“感覺有點暈??！”

老朱：“沒關(guān)系，我們通過一個實例看看怎么繪制圖片?！?/p>

“我現(xiàn)在使用了三個參數(shù)進(jìn)行繪制，第一個參數(shù)是img對象，第二個參數(shù)是圖片距離canvas左端的距離，第三個參數(shù)是圖片距離頂端的距離。如果希望圖片從左上角開始重繪，我們可以把后兩個參數(shù)都設(shè)置為0。”

小白說：“怎樣才能讓圖片跟canvas高度和寬度一致呢？”

老朱：“這里我們就需要使用drawImage(img,sx,sy,swidth,sheight,x,y,width,height)方法了，可以看出sx、sy、x、y都應(yīng)該取0值。width和height應(yīng)該跟canvas寬度高度一致。關(guān)鍵是swidth和sheight的值?！?/p>

小白：“按照字面意思理解，這里是要使用的圖片的高度和寬度，那應(yīng)該是取圖片的原始寬度和高度吧！”

老朱：“恩，是的，要拿到它的原始高度和寬度，可以通過Image對象的width和height屬性獲取，不過直接取會有問題，你可以先看一下直接取的問題?！?/p>

小白：“為什么取不上呢？”

老朱：“當(dāng)img的src屬性指向?qū)?yīng)地址以后，瀏覽器無法瞬間拿到圖片的寬度和高度，我們需要等圖片加載完成以后才能獲取（除非圖片加載過并且在緩存中才能取到），所以保險起見我們需要使用當(dāng)圖片加載完成（onload）的方法?！?/p>

“這樣無論是不是首次加載圖片，都可以拿到圖片原始寬度和高度了，最后我們在onload方法中重繪圖片就可以了。”

小白：“感覺還是不對啊，圖片比例有問題！”

老朱：“這正是我們要說的圖片重繪很重要的一個問題，通過css控制canvas寬度和高度之后，canvas只是按比例進(jìn)行了變化，也就是說canvas其實是變形的?，F(xiàn)在把canvas的css寬度和高度去掉看一下效果?！?/p>

“他的默認(rèn)寬度和高度是300×150像素，所以我們對canvas進(jìn)行寬度高度控制的時候最好在canvas屬性上直接設(shè)定寬度和高度。”

“這樣就沒有問題了！在實際使用的時候位圖重繪可能有很多需求，你需要根據(jù)需求設(shè)定對應(yīng)的繪制參數(shù)，我希望你能把drawImage參數(shù)做不同變化進(jìn)行測試。主要做下面三個功能的練習(xí)”

1、圖片裁剪；

2、繪制到canvas指定位置，如右下角；

3、如何通過jQuery動態(tài)更改canvas寬度和高度（通過attr更改canvas屬性）后，還能正確重繪圖片。

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力！