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();