筆試題中遇到canvas元素渲染的問題，平時不太使用canvas元素，有些疑惑，總結一二。
<canvas>是HTML5新增的，可以通過腳本（通常爲javascript）在其中繪製圖像的HTML元素。<canvas>元素本身沒有繪製能力，它僅僅是一個圖形容器，必須使用腳本來完成繪圖任務，它就像我們畫畫的畫布一樣，需要人來用畫筆完成畫作。
1.canvas基本使用：
<canvas id="" width="" height=""></canvas>
<canvas>元素只有兩個可選的屬性width、height屬性，如果不設置width、height屬性，則默認爲width爲300、height爲150，單位均爲px。
也可以使用csss屬性來設置canvas的寬和高，但是寬高的屬性如果和初始比例不一致，則會出現扭曲。因此，建議永遠不要使用css屬性設置canvas的寬高。同樣在內聯樣式中通過style屬性設置canvas的寬高也會出現拉伸或是縮小，因此正確且保險的設置方式是使用canvas元素的width、height屬性。
1.1支持性
由於某些瀏覽器不支持canvas元素，在這些瀏覽器上應該總是能展示替代內容。支持<canvas>的瀏覽器會只渲染<canvas> 標籤，而忽略其中的替代內容。不支持<canvas>的瀏覽器則 會直接渲染替代內容。可以使用文本或是圖片進行替換：
<canvas id="" width="" height="">
<img src="" alt="">
</canvas>
1.2 渲染上下文
<canvas>會創建一個固定大小的畫布，會公開一個或多個渲染上下文，使用其繪製和處理要展示的內容。以2D渲染上下文爲例：
var cav=document.getElementById("cav");
//獲得2d上下文對象
var ctx=cav.getContext('2d');
2.筆試題目：
<canvas width="250" height="250"></canvas>有個矩形長20px，高10px,CSS中width：250px height：500px，請問這個矩形渲染出來的實際面積（）？
A.400 B.200 C.300 D.800
解析：畫布大小和CSS中設置width：250px height：500px一致，其width和初始值比例爲1:1，height和初始值比例爲2:1。因此渲染出來的矩形的高度也將擴大一倍爲20px，則矩形渲染出來的實際面積20X20=400。下圖也可以下看出最終渲染出來的矩形是一個正方形。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
canvas {
border: 1px solid black;
width: 250px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="cav" width="250" height="250">瀏覽器不支持</canvas>
<script type="text/javascript">
window.addEventListener("load", () => {
var can = document.getElementById('cav');
var ctx = can.getContext("2d");
ctx.fillStyle = "rgb(0,0,255)";
ctx.fillRect(0, 0, 20, 10);
})
</script>
</body>
</html>
2.1如果給上述試題的canvas設置內聯樣式，會發現渲染矩形的結果和預期的不符：
<canvas id="cav" style="width: 250px;height: 250px;">瀏覽器不支持</canvas>
