一直很困惑為什么canvas標簽和其他標簽不一樣，寬高需要設置在canvas標簽里，設置在style里就會有問題。
純粹個人理解，有錯誤歡迎指出。
> 結論寫在頭
設置在style里有問題其實是因為：
canvas標簽里的寬高是相當於定義畫布的大小（默認寬300px，高150px）。在定義了畫布之后，canvas就相當於一張圖片了，類似於img，所以這個時候再設置寬高，就會把canvas拉伸成style里設置的寬高了。
下面看例子：
> 默認狀態
<style>
body{background:black;}
#c{background: yellow;}
div{background: pink;width: 300px;height: 150px;}
</style>
<script>
window.onload = function(){
var oC = document.getElementById('c');
var oGC = oC.getContext('2d');
oGC.strokeRect(50,50,100,100);
}
</script>
<body>
<canvas id="c"></canvas>
<div>width: 300px; height: 150px;</div>
</body>
在canvas畫布下加了一個DIV，可以看到畫布的默認大小是300*150px的。
> 在canvas標簽里設置300*300px
<!--其他代碼同上-->
<body>
<canvas id="c" width = "300px" height = "300px""></canvas>
<div>width: 300px; height: 150px;</div>
</body>
這里要注意在canvas標簽里設置寬高的方式，是直接寫width = "300px" height = "300px"，而不是以行間樣式的方式設置的。
> 在canvas標簽里設置300*300px后，style設置成300*150px
<style>
body{background:black;}
#c{background: yellow;width: 300px;height: 150px;}
div{background: pink;width: 300px;height: 150px;}
</style>
<script>
//同上
</script>
<body>
<canvas id="c" width = "300px" height = "300px""></canvas>
<div>width: 300px; height: 150px;</div>
</body>
可以看到，canvas畫布的大小的確是被設置成300*150px了，但里面的內容卻被壓縮了。
相當於一張300*300px的圖片，被設置為300*150px，所以參考的長方形被壓短了一半。