HTML5 drawImage的问题
请看下面这段代码,很简单,就是在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>