《HTML5canvas開發詳解（第2版）》——1.9　HTML5Canvas物件

本節書摘來自非同步社群《HTML5 canvas開發詳解（第2版）》一書中的第1章，第1.9節,作者： 【美】Steve Fulton , Jeff Fulton 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

1.9　HTML5 Canvas物件

Canvas物件是通過在HTML頁面的< body >部分中放置< canvas >標籤建立的，也可以通過以下程式碼建立畫布例項。

var theCanvas = document.createElement("canvas");

Canvas物件有兩個相關的屬性和方法可以通過JavaScript訪問：width和height。這些屬性顯示當前HTML頁面建立的畫布的寬度和高度。這裡需要強調的是，這兩個屬性並不是只讀的。例如，通過程式碼可以對它們進行更新，從而影響HTML頁面上的物件。這意味著什麼？這意味著使用者可以在HTML頁面上動態地調整畫布尺寸而無須重新載入。

提示
也可以使用CSS樣式來改變畫布的縮放比例。與調整大小不同，縮放提取當前畫布的點陣圖區域，然後重新取樣以適應CCS樣式中設定的寬度和高度的值。例如，將畫布縮放到400 × 400區域，可以使用以下CSS樣式。

style="width: 400px; height:400px"

第3章有一個使用變換矩陣縮放Canvas的示例。
Canvas物件目前有兩個公共方法。第一個是getContext()，本章前面就使用過。本書將繼續使用這個方法獲得Canvas 2D環境物件的引用，這樣才能在畫布上進行繪圖。第二個方法是toDataURL()，這個方法返回的資料是代表當前Canvas物件產生點陣圖的字串。它就像是螢幕的一個快照，通過提供一個不同的MIME型別作為引數，可以返回不同的資料格式。基本的格式是image/png，但是也可以獲取image/jpeg和其他格式。下一個應用程式將會使用toDataURL()方法，把畫布中的影像匯出到另一個瀏覽器視窗。

提示
第三個公共的方法——toBlob()，已經被定義，並且正在不同的瀏覽器上實現該方法。toBlob（[callback]）將返回一個引用影像的檔案，而不是一個base64編碼的字串。目前，尚未有任何瀏覽器實現該方法。