Canvas寬高改變不能用css方法

本文轉自：http://www.cnblogs.com/wuyinghong/p/3633213.html

<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標簽里面設置了，這樣一來，就直接改變了默認的畫布寬跟高的值。