【canvas學習筆記一】基本認識
阿新 • • 發佈：2017-07-25
基本認識 設置 supported eight -c 失真 ont 之前 上下
<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的基礎認識就到這啦。
【canvas學習筆記一】基本認識