html canvas标签宽度和css宽度的区别

遇到的问题

//html


//css
.cvs{
  width:500px;
  height:400px;
}

如果此时我在canvas上画一个圆，但是在浏览器上看到的效果却是个扁平的圆。为什么？

个人理解

canvas就像一张图片，如上面的例子就是一张300*300的图片，当你通过css设置宽度和高度时，就相当于你对一个图片进行了拉伸处理，如果设置的宽高比例和canvas本来的宽高比例不同的话，就会出现变形的情况。

如何改变canvas宽高？

因为通过css设置宽高只相当于对canvas进行缩放操作；所以我们可以通过js来修改canvas标签上的属性来达到我们想要的效果。
举个栗子：

//js
canvas = $('.cvs')[0];
canvas.width = 500;
canvas.height = 400;

刷新浏览器，正圆又回来了，大功告成~