关于canvas 画布定义样式问题

话头：

在使用canvas绘制图片时，记得一定要先onload,然后在绘制图片

var c=document.getElementById("canvas");

var cxt=c.getContext("2d");

var img=new Image();

img.src="images/1.jpg";

img.onload=function(){

　　cxt.drawImage(img,0,0);

}

 

1.当样式定义在标签内的style中时，如

<canvas id="canvas" style="width:900px;height:506px;"></canvas>

绘制一张图片之后，图片被放大，或者说是被拉伸导致变形。原因是因为canvas标签本身就相当于一张图片，当在内部定义样式时，图片就被拉伸变形了。

 

2、而，按照w3c标准书写样式时，图片是正常显示的。

<canvas id="canvas" width="900px" height="506px"></canvas>

ps:第一篇博客，如有不准确处请联系博主。