<canvas class="cvs"></canvas>

遇到的問題：

如css 中設.cvs{width:500px;height:400px;}，也就是css改變了canvas的尺寸後，本來是可以畫出一個圓來，現在卻是一個扁平的圓，為什麼呀？
如圖：

什麼原因：（百度上說的）

當你在支援html5 canvas的瀏覽器下檢視頁面的時候，你會看到一個大小為300px*300px（BTW：canvas預設大小為：300px*150pxcanvas）相當於一張圖片，css設定的屬性相當於對這張圖片進行拉伸變化。
要改變canvas的大小，應當用這種方式：

使用js來改變
<canvas width=500 height=400></canvas>
 

對應的javascript是
canvas=document.getElementsByTagName('canvas')[0];
canvas.width=500;
canvas.height=400;

換句話說，你現在畫出的圓實際顯示的是在預設大小上經過拉伸變換的樣子。

自己的理解：
  
    canvas是一張畫布，就像一張圖片那樣，預設的圖片大小事300*150，但是我們在css樣式中設定了canvas，就是把圖片給拉伸變換了，於是我們不一樣的圖片。就像我們開啟平時一張圖片，然後進行拉伸般，於是圖片就變形。
   所以，畫布的寬跟高，最好還是直接在canvas標籤裡面設定了，這樣一來，就直接改變了預設的畫布寬跟高的值。