"朱哥！JavaScript這幾天學(xué)的腦子都發(fā)熱了，我怎么感覺(jué)越來(lái)越枯燥了！"小白一大早就向老朱抱怨道。

老朱：“對(duì)象這塊知識(shí)是js自始至終永遠(yuǎn)離不開(kāi)的內(nèi)容，而類(lèi)又是對(duì)象的抽象，所以你前期了解類(lèi)的知識(shí)還是有必要的，不過(guò)我們不是還沒(méi)有深入學(xué)習(xí)類(lèi)么！”

小白：“還沒(méi)有深入學(xué)習(xí)？”

老朱：“恩，其實(shí)還有一種終極類(lèi)的繼承模式我們沒(méi)有說(shuō)，前兩天我們做的類(lèi)的繼承看上去功能實(shí)現(xiàn)了，但是每次實(shí)例化的時(shí)候都要重新執(zhí)行一遍父類(lèi)的構(gòu)造函數(shù)，效率上還是差點(diǎn)，終極類(lèi)繼承就能完美解決這些問(wèn)題，不過(guò)我們暫時(shí)先不討論，等你js再熟悉一點(diǎn)我們?cè)僬f(shuō)，今天咱聊個(gè)有意思的功能——畫(huà)布（canvas）?！?/p>

小白：“好??！終于到畫(huà)布了，早就聽(tīng)說(shuō)HTML5新增了畫(huà)布功能，到現(xiàn)在還沒(méi)碰過(guò)它呢！”

“canvas就是一個(gè)繪圖的容器，我們一樣可以通過(guò)css對(duì)它進(jìn)行樣式控制。你看上面的布局顯示效果如下。在畫(huà)布上點(diǎn)右鍵可以看到，它就是一個(gè)圖片?！?/p>

“別小看這一小小的canvas標(biāo)簽，它的功能強(qiáng)大到爆，它的核心功能就是位圖重繪，它可以把一張圖加載到內(nèi)存中重新繪制到canvas中（注意不是插入，是重新繪制），也可以把一張圖加載到內(nèi)存中進(jìn)行切片繪制?！?/p>

“比如這張我從網(wǎng)上隨便搜的圖片，通過(guò)canvas可以把這張圖分成四個(gè)切片，按需繪制，網(wǎng)頁(yè)游戲里面的任務(wù)場(chǎng)景等控制都是通過(guò)canvas重繪完成的。”

小白驚訝的說(shuō)：“怪不得現(xiàn)在很多游戲可以在網(wǎng)頁(yè)上直接玩，原來(lái)是canvas實(shí)現(xiàn)的??！”

老朱：“恩，是啊，雖然現(xiàn)在還有很多flash制作的游戲，不過(guò)html5游戲占有率正在逐步增加?！?/p>

小白：“學(xué)會(huì)canvas就可以做游戲了么？趕緊教教我吧！”

老朱：“做游戲牽扯的功能太多了，等你把html5用的很熟的時(shí)候再想著去做游戲吧！現(xiàn)在能把canvas用在web前端應(yīng)用中就已經(jīng)很不錯(cuò)了?！?/p>

老朱接著說(shuō)：“通過(guò)document.getElementById('mycanvas')可以拿到canvas對(duì)象，如果要在canvas上畫(huà)圖，我們可以使用getContext方法獲取繪圖對(duì)象?！?/p>

“ctx是一個(gè)CanvasRenderingContext2D對(duì)象，通過(guò)ctx我們可以設(shè)定繪圖的填充色fillStyle、繪制圖形fillRect等操作，具體ctx能夠做哪些繪圖操作我們后面會(huì)繼續(xù)討論，你有時(shí)間先自己看看它有哪些屬性和方法。剛才的代碼繪制出來(lái)的圖形你看看結(jié)果”

“這個(gè)通過(guò)動(dòng)態(tài)繪制的圖片通過(guò)鼠標(biāo)右鍵可以直接保存到本地！”

小白突然跳出來(lái)一句：“既然能在canvas中重繪圖片，那是不是很多本地的圖片我們先在canvas中重繪然后再上傳到服務(wù)器就可以實(shí)現(xiàn)圖片壓縮呢？”

老朱：“哇！小白你現(xiàn)在思路很寬??！確實(shí)可以，不但能壓縮圖片還能添加水印和裁剪，canvas了解以后我們就做一個(gè)圖片上傳的功能練練手。你先自己熟悉一下canvas標(biāo)簽相關(guān)的屬性和方法吧！”

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