canvas在css中设置样式之后，图像变形

初次使用canvas，在css中设置样式，然后图像变形严重，检查之后，原来不能在css中设置样式，可以在canvas标签中设置

<canvas id="canvas" width="300px"  height="300px"></canvas>

或者在js中设置

var c = document.getElementById("canvas");
c.width = 300;
c.height = 300;
var ctx = c.getContext("2d");    //  二维画布
ctx.fillRect(20, 20, 100, 150);

这么处理就不会变形了
可以解释为：canvas本身类似一张图片，如果在css中设置样式，相当于把图片拉伸，导致图像变形