canvas drawimage繪製圖像出錯（默認canvas300*150）解決辦法

今天在開發中，再一次踩了之前踩過的坑，寫完程序在這裏寫一下，分享給你們也避免再次遇坑。

//默認的canvas
<canvas id ="canvas"></canvas>

　此時，他的寬高是默認的300*150

若是這樣聲明：

  <canvas id ="canvas" style="width:500px;height:300px"></canvas>

　按理說，寬高應該是500/300，可是獲取到的寬高是 300*150。

   我經過js設置的$("#canvas").get(0).style.width,自適應屏幕寬高，也是上述狀況。

   像這種相似的在style裏設置寬高，都會形成與實際不符。因此要避免這種賦值方法。

 

   正確書寫方法:

   

Canvas元素默認寬 300px, 高 150px, 設置其寬高使用以下方法：
方法一：
1 <canvas width="500" height="500"$amp;>amp;$lt;/canvas>

方法二：使用HTML5 Canvas API操做
1 var canvas = document.getElementById('欲操做canvas的id');
2 canvas.width = 500;
3 canvas.width = 500;

若經過以下方法設置寬高，那麼canvas寬高仍是300*150：
錯誤方法一：使用CSS 會被拉伸
1 #canvas｛
2     width:1000px;
3     height:1000px;
4 ｝

也包含了行間樣式中的 style="" 。也就是上面的例子。

錯誤方法二：使用HTML5 Canvas API操做 
1 var canvas = document.getElementById('canvas的id');
2 canvas.style.width = "1000px";
3 canvas.style.height = "1000px";

錯誤方法三 ：用jquery的$("#id").get(0).style.width();