"朱哥！JavaScript這幾天學的腦子都發熱了，我怎么感覺越來越枯燥了！"小白一大早就向老朱抱怨道。

老朱：“對象這塊知識是js自始至終永遠離不開的內容，而類又是對象的抽象，所以你前期了解類的知識還是有必要的，不過我們不是還沒有深入學習類么！”

小白：“還沒有深入學習？”

老朱：“恩，其實還有一種終極類的繼承模式我們沒有說，前兩天我們做的類的繼承看上去功能實現了，但是每次實例化的時候都要重新執行一遍父類的構造函數，效率上還是差點，終極類繼承就能完美解決這些問題，不過我們暫時先不討論，等你js再熟悉一點我們再說，今天咱聊個有意思的功能——畫布（canvas）。”

小白：“好??！終于到畫布了，早就聽說HTML5新增了畫布功能，到現在還沒碰過它呢！”

“canvas就是一個繪圖的容器，我們一樣可以通過css對它進行樣式控制。你看上面的布局顯示效果如下。在畫布上點右鍵可以看到，它就是一個圖片?！?/p>

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

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

小白驚訝的說：“怪不得現在很多游戲可以在網頁上直接玩，原來是canvas實現的??！”

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

小白：“學會canvas就可以做游戲了么？趕緊教教我吧！”

老朱：“做游戲牽扯的功能太多了，等你把html5用的很熟的時候再想著去做游戲吧！現在能把canvas用在web前端應用中就已經很不錯了。”

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

“ctx是一個CanvasRenderingContext2D對象，通過ctx我們可以設定繪圖的填充色fillStyle、繪制圖形fillRect等操作，具體ctx能夠做哪些繪圖操作我們后面會繼續討論，你有時間先自己看看它有哪些屬性和方法。剛才的代碼繪制出來的圖形你看看結果”

“這個通過動態繪制的圖片通過鼠標右鍵可以直接保存到本地！”

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

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

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！