核心提示：刚开始学习canvas，在画正方形时，使用了样式控制canvas的大小。但画出来的图形被拉伸了，严重变形。!doctype htmlhtmlheadmeta charset=UTF-8meta nam...
刚开始学习canvas，在画正方形时，使用了样式控制canvas的大小。但画出来的图形被拉伸了，严重变形。
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='renderer' content='webkit'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>canvas拉伸问题</title>
<style>
#pad{//使用样式控制时，画板被拉伸了
width:500px;
height:400px;
border:1px solid #000;
}
</style>
</head>
<body>
<canvas id='pad'></canvas>
<script>
var oPad = document.getElementById('pad');//获取ID
var ctx = oPad.getContext('2d');//获取画布
ctx.beginPath();//开始使用画布
ctx.fillStyle= '#ccc';//填充颜色
ctx.fillRect(20,20,100,100);//画正方形
</script>
</body>
</html>
被拉的图形：
正常效果：
原因是 canvas的默认大小是300*150大小（有的说是300*300，个人测试结果是300*150），当使用样式控制画布时，是相当于把固定的图片拉伸了，所以会变形。
解决办法有两种：
一种是设置canvas的属性：
<canvas id='pad' width='500' height='400'></canvas>
第二种是使用js设置属性：
var oPad = document.getElementById('pad');//获取ID
oPad.width=500;
oPad.height=400;
