canvas標籤簡單介紹

此標籤是HTML5新增，使用如下程式碼即可將其放置於頁面之中:

[HTML] 純文字檢視 複製程式碼
<canvas id="canvas" width="400" height="400"></canvas>

它用來繪圖，但真正的繪圖需要用JavaScript來操作，所以堅實的JavaScript知識是關鍵。

一.畫布:

傳統繪畫需要一個畫布，同樣的道理，使用canvas繪畫也需要一個"畫布"。

這個畫布直接由<canvas>標籤提供，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<canvas id="canvas" width="400" height="400"></canvas>

使用畫布之前，需要獲取這個"畫布"，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var cvs = document.getElementById("canvas");

二.繪圖環境:

傳統的繪畫，不但需要一個畫布，還需要畫筆、墨水等等工具，我們權且統稱這些工具為繪圖環境。

同理，使用canvas繪圖之前也需要獲取一個繪圖環境，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
//獲取畫布
var cvs = document.getElementById("canvas");
//獲取繪圖環境
var ctx = cvs.getContext("2d");

獲取的繪圖環境ctx，具有各種繪圖的方法和繪圖屬性。

三.設定canvas畫圖的尺寸:

如果沒有顯式規定canvas的尺寸，它預設寬度為300px，高度為150px。

可以通過canvas標籤的width和height屬性來設定畫布的尺寸。

也可以使用css的width和height屬性來設定，但是兩者的區別是巨大的，並且要儘量使用避免使用css設定。

具體可以參閱CSS與canvas屬性設定畫布尺寸一章節。