“小白，canvas繪制圖形功能自己看了么袜漩？”
“看了绪爸，我自己畫了些圓和線條，還繪制了問題宙攻，不過感覺沒什么實用價值奠货。”
“這些功能對于做圖表還是很有用的粘优，了解一下就可以了仇味，我們今天聊聊canvas在web前端應(yīng)用中最常用的一個功能——重繪外部圖片”⑺常”
“外部圖片直接插入到網(wǎng)頁上不行么丹墨？為什么要在canvas中重繪呢？”
老朱說：“假如用戶上傳頭像的時候圖片格式特別大嬉愧，我們就可以把頭像先在canvas中重繪一下贩挣，然后再把重繪好的圖片發(fā)送到服務(wù)器進行保存，這樣用戶以后使用頭像的時候，圖片格式就非常小了王财。從今天開始我們實現(xiàn)一下圖片上傳的功能卵迂，你先創(chuàng)建一個空的html文件，然后插入一個canvas標(biāo)簽绒净〖洌”
小白很快便布局好了，說道：“好了挂疆，我還用css控制了canvas的寬度和高度改览！”
老朱看完以后說道：“在javascript中有一個Image類，他是用來對圖片進行操作的類缤言，我們可以通過實例化一個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軸√桌”
小白有點不明白推励，說道：“感覺有點暈啊肉迫！”
老朱：“沒關(guān)系验辞，我們通過一個實例看看怎么繪制圖片『吧溃”
“我現(xiàn)在使用了三個參數(shù)進行繪制跌造，第一個參數(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的值≌鞠鳎”
小白：“按照字面意思理解坊萝，這里是要使用的圖片的高度和寬度，那應(yīng)該是取圖片的原始寬度和高度吧钻哩！”
老朱：“恩屹堰，是的，要拿到它的原始高度和寬度街氢，可以通過Image對象的width和height屬性獲取，不過直接取會有問題睦袖，你可以先看一下直接取的問題珊肃。”
小白：“為什么取不上呢馅笙？”
老朱：“當(dāng)img的src屬性指向?qū)?yīng)地址以后伦乔，瀏覽器無法瞬間拿到圖片的寬度和高度，我們需要等圖片加載完成以后才能獲榷啊（除非圖片加載過并且在緩存中才能取到）烈和，所以保險起見我們需要使用當(dāng)圖片加載完成（onload）的方法∶罅埽”
“這樣無論是不是首次加載圖片招刹，都可以拿到圖片原始寬度和高度了，最后我們在onload方法中重繪圖片就可以了窝趣》枋睿”
小白：“感覺還是不對啊，圖片比例有問題哑舒！”
老朱：“這正是我們要說的圖片重繪很重要的一個問題妇拯，通過css控制canvas寬度和高度之后，canvas只是按比例進行了變化洗鸵，也就是說canvas其實是變形的≡叫猓現(xiàn)在把canvas的css寬度和高度去掉看一下效果”毂酰”
“他的默認(rèn)寬度和高度是300×150像素甘凭，所以我們對canvas進行寬度高度控制的時候最好在canvas屬性上直接設(shè)定寬度和高度±艋觯”
“這樣就沒有問題了对蒲！在實際使用的時候位圖重繪可能有很多需求钩蚊，你需要根據(jù)需求設(shè)定對應(yīng)的繪制參數(shù)，我希望你能把drawImage參數(shù)做不同變化進行測試蹈矮。主要做下面三個功能的練習(xí)”
1砰逻、圖片裁剪；
2泛鸟、繪制到canvas指定位置蝠咆，如右下角；
3北滥、如何通過jQuery動態(tài)更改canvas寬度和高度（通過attr更改canvas屬性）后刚操，還能正確重繪圖片。
想學(xué)H5的朋友可以關(guān)注老爐再芋，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力菊霜！
