<canvas>標簽定義了一塊畫布，畫布可以在網頁中繪製2D和3D圖象，現在先學習如何繪製2D圖象，繪製3D圖象屬於WebGL的內容（也就是網頁版的OpenGL，3D圖形介面）。 屬性 <canvas>只有width和height兩個屬性。如果沒有設置width和height屬性，canvas的預設 ...
<canvas>標簽定義了一塊畫布，畫布可以在網頁中繪製2D和3D圖象，現在先學習如何繪製2D圖象，繪製3D圖象屬於WebGL的內容（也就是網頁版的OpenGL，3D圖形介面）。
屬性
<canvas>只有width和height兩個屬性。如果沒有設置width和height屬性，canvas的預設初始大小是寬300px，高150px。如果通過CSS來設置canvas的寬高，而設置的寬高不是預設大小的比例，則canvas呈現的圖象會失真變形。所以，建議用JavaScript來設置canvas的寬高。
如果沒有給canvas設置樣式，那麼canvas將是一塊透明的矩形，除非在上面繪製圖形。
反饋信息
<canvas>標簽很容易定義反饋信息。如果瀏覽器不支持<canvas>標簽，則canvas不會出現，而包含在<canvas></canvas>標簽之間的內容則會顯現出來。比如：
<canvas>
Your browser doesn't support!
</canvas>如果瀏覽器不支持<canvas>標簽的話，則會顯示“Your browser doesn't support!”這條信息。 如果瀏覽器支持<canvas>標簽，則這些內容不會顯示。
繪圖上下文
要在canvas上繪圖，要獲取canvas的繪圖上下文，通過繪圖上下文在canvas上繪製圖形、圖象。 繪製2D圖形要獲取2D繪圖上下文，繪製3D圖形要獲取3D繪圖上下文，這就屬於WebGL的內容了。
<canvas id="canvas">
Your browser doesn't support!
</canvas>
省略完整代碼，下麵是JavaScript部分
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');用.getContext方法就可以獲得2D繪圖上下文。如何用ctx繪製圖形下一篇再說。
相容性檢測
之前說了<canvas>標簽內包含的反饋信息，現在說如何用JavaScript來檢測canvas的相容性。通過檢測.getContext方法是否存在來判斷。 代碼如下：
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
關於canvas的基礎認識就到這啦。
