本節書摘來自異步社群《web前端開發精品課——html5 canvas開發詳解》一書中的第1部分，第1章，作者：莫振傑 著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
在html5之前，為了達到頁面絢麗多彩的效果，我們很多情況下都是借助“圖檔”來實作。不過使用圖檔這種方式，都是以“低性能”為代價的。由于圖檔體積大、下載下傳速度慢等原因，是以為了應對日漸複雜的web應用開發，w3c在html5标準中引入了canvas這一門技術。
我們都知道，html5新增了一個canvas元素。其實，canvas又稱為“畫布”，是html5的核心技術之一。我們常說的canvas技術，指的就是使用canvas元素結合javascript來繪制各種圖形的技術。
既然canvas是html5核心技術，那它都有哪些厲害之處呢？
canvas可以用來繪制各種基本圖形如矩形、曲線、圓等，也可以繪制各種複雜絢麗的圖形，如圖1-1所示。
很多公司業務的資料展示都離不開圖表，使用canvas可以用來繪制滿足各種需求的圖表，如圖1-2所示。
使用canvas，我們也可以制作出各種華麗的動畫效果，這也是canvas為大家帶來的一大樂趣，如圖1-3所示。
遊戲開發在html5領域具有舉足輕重的地位，現在我們也可以使用canvas來開發各種遊戲，如圖1-4所示。這幾年非常火的遊戲如圍住神經貓等，就是使用html5 canvas來開發的。
此外，canvas技術是一門純javascript操作的技術，是以大家需要具備javascript入門知識。對于javascript的學習，可以關注綠葉學習網（www.lvyestudy.com）中的開源教程。
html5有兩個主要的2d圖形技術：canvas和svg。事實上，canvas和svg是兩門完全不同的技術。兩者具有以下差別。
（1）canvas是使用javascript動态生成的，svg是使用xml靜态描述的。
（2）canvas是基于“位圖”的，适用于像素處理和動态渲染，圖形放大會影響品質。svg是基于“矢量”的，不适用于像素處理和靜态描述，圖形放大不會影響品質。也就是說，使用canvas繪制出來的是一個“位圖”，而使用svg繪制出來的是一個“矢量圖”。如圖1-5和圖1-6所示。
（3）每次發生修改，canvas需要重繪，而svg不需要重繪。
（4）canvas與svg的關系，簡單來說，就像“美術與幾何”的關系一樣。
此外，并非canvas就比svg更有前途，也并非svg就比canvas更有前途，因為這兩個是用于不同場合的。在實際開發中，我們應該根據開發需求去選擇。
當然，這裡隻是簡單介紹了一下canvas與svg的差別，如果想真正了解，我們還需要深入學習這兩門技術。最後給大家一個小小的建議：很多人接觸新技術的時候，喜歡在第一遍學習中就把每一個細節都弄清楚，事實上這是效率最低的學習方法。在第一遍學習中，如果有些東西實在沒辦法了解，那就直接跳過，等到學到後面或者看第二遍的時候，自然而然就懂了。
html5 canvas，簡單來說，就是一門使用javascript來操作canvas元素的技術。使用canvas元素來繪制圖形，需要以下三步。
（1）擷取canvas對象。
（2）擷取上下文環境對象context。
（3）開始繪制圖形。
舉例：
在浏覽器中的預覽效果如圖1-7所示。
分析：
在canvas中，我們首先使用document.getelementbyid()方法來擷取canvas對象（這是一個dom對象），然後使用canvas對象的getcontext("2d")方法擷取上下文環境對象context，最後再使用context對象的屬性和方法來繪制各種圖形。
canvas是一個行内塊元素（即inline-block），我們一般需要指定其三個屬性：id、width和height。width和height分别定義canvas的寬度和高度。預設情況下，canvas的寬度為300px，高度為150px。
對于canvas的寬度和高度，有兩種方法來定義：①在html屬性中定義；②在css樣式中定義。但是在實際開發中，我們一定不要在css樣式中定義，而是應該在html屬性中定義。為什麼呢？下面先來看一個例子。
在浏覽器中的預覽效果如圖1-8所示。
從這個例子可以看出：如果在css樣式中定義，我們使用canvas對象擷取的寬度和高度是預設值，而不是實際的寬度和高度。這樣就無法擷取canvas對象正确的寬度和高度。擷取canvas對象實際的寬度和高度是canvas開發中最常用的操作，是以對于canvas的寬度和高度我們就一定要在html屬性中定義，而不是在css屬性中定義。
在canvas中，我們可以使用document.getelementbyid()方法來擷取canvas對象。canvas對象常用的屬性和方法如下：
也就是說，我們可以使用cnv.width和cnv.height分别擷取canvas的寬度和高度，可以使用cnv.getcontext("2d")來擷取canvas 2d上下文環境對象，也可以使用todataurl()來擷取canvas對象産生的位圖的字元串。在這裡，cnv是指canvas對象。
對于todataurl()方法，我們可以暫時不去深入，在後面章節中會詳細給大家介紹。這裡我們隻要認真學習一下getcontext("2d")方法就可以了。在canvas中，我們使用getcontext("2d")來擷取canvas 2d上下文環境對象，這個對象又稱為context對象。後面章節接觸的所有圖形的繪制，使用的都是context對象的屬性和方法，這一點需要特别清楚。當然現在不了解沒關系，學到後面再回過頭來看看這段話就懂了。
在浏覽器中的預覽效果如圖1-9所示。
本節要特别注意一點：以後學習的所有圖形的繪制，我們使用的都是context對象（上下文環境對象）的屬性和方法。