请看下面这段代码，很简单，就是在canvas上画一个图片，宽度和高度应该相等都是100，但为什么显示出来的就完全不一样呢？画出来的图片，宽度是100，但高度就长了很多，这是什么原因呢？
<script type="text/javascript">
function OnClick() {
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, 100, 100);
};
img.src = "/Content/themes/home/images/Hydrangeas.jpg";
}
</script>
<h2>HTML5LoadImage</h2>
<button id="btn1" type="button" onclick="OnClick();" value="click">Click</button>
<br />
<br />
<canvas id="canvas1" style="background-color:Yellow; width:500px; height:500px; ">
</canvas>
<br />
------解决方案--------------------
换成这样，来体会一下
<canvas id="canvas1" width="150" height="150" style="background-color:Yellow; width:500px; height:500px; ">
</canvas>