《HTML5 Canvas開發詳解》——1.8 HTML5 Canvas對象

本節書摘來自異步社群《html5 canvas開發詳解》一書中的第1章，第1.8節,作者： 【美】steve fulton , jeff fulton 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

canvas對象是通過在html頁面的< body > 部分中放置< canvas > 标簽建立的，也可以通過以下代碼建立畫布執行個體。

canvas對象有兩個相關的屬性和方法可以通過javascript通路：width和height。這些屬性顯示目前html頁面建立的畫布的寬度和高度。這裡需要強調的是，這兩個屬性并不是隻讀的。例如，可以通過代碼對它們進行更新，進而影響html頁面上的對象。這意味着什麼？這意味着可以在html頁面上動态地調整畫布尺寸而無須重新加載。

提示：

也可以使用css樣式來改變畫布的縮放比例。與調整大小不同，縮放提取目前畫布位圖區域，然後重新取樣以适應ccs樣式中設定的寬度和高度的值。例如，将畫布縮放到400×400區域，可以使用以下css樣式。

第3章有一個使用變換矩陣縮放canvas的示例。

canvas對象還有兩個公共方法。第一個是getcontext()，本章前面就使用過。本書将繼續使用這個方法獲得canvas 2d上下文對象的引用，這樣才能在畫布上進行繪圖。第二個方法是todataurl()，這個方法傳回的資料是代表目前canvas對象産生位圖的字元串。它就像是螢幕的一個快照。通過提供一個不同的mime類型作為參數，可以傳回不同的資料格式。基本的格式是image/png，但是也可以擷取image/jpeg和其他格式。下一個應用程式将會使用todataurl()方法 ，把畫布中的圖像導出到另一個浏覽器視窗。