現在前端程式碼書寫習慣，一般都會遵循標籤結構與樣式分離的寫法，即一般不新增標籤屬性來控制頁面元素顯示效果，而通過<style/> 或引用css檔案來實現！

但使用Canvas時，也採用同樣的方式來處理，卻會產生一個讓人很難理解的現象：使用<style/> 或引用css檔案設定Canvas畫布的width、height大小，則導致畫布元素尺寸會按css值進行比例縮放，示例如下：

<script> var canvas=document.createElement("canvas"); canvas.style.cssText="width:200px;height:200px;background:#080;"; var ctx=canvas.getContext("2d"); ctx.fillStyle="#f00"; ctx.fillRect(0,0,100,100); document.body.appendChild(canvas); </script>

提示：你可以先修改部分程式碼再執行。

正確設定canvas標籤尺寸大小的方式是：直接通過新增標籤屬性width、height來實現的，這也是避免出現上述怪現象的最直接、簡單的方法，上述程式碼改動如下：

<script> var canvas=document.createElement("canvas"); canvas.style.cssText="background:#080;"; canvas.width=200; canvas.height=200; var ctx=canvas.getContext("2d"); ctx.fillStyle="#f00"; ctx.fillRect(0,0,100,100); document.body.appendChild(canvas); </script>

提示：你可以先修改部分程式碼再執行。

另外要注意的是：
雖然w3c官方稱，width、height這2個屬性可以指定為一個整數畫素值或者是視窗寬高度的百分比：http://www.w3school.com.cn/jsref/dom_obj_canvas.asp
但實際上：canvas標籤屬性width/height值只能是數值，而不能識別百分比(即使設定canvas為塊狀元素display:block;也一樣)，表現頁面無效果！

參考連結：

http://www.alixixi.com/web/a/2014031192657.shtml

http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html

http://blog.csdn.net/mydeman/article/details/11766847