canvas就像一张图片，如上面的例子就是一张300*300的图片，当你通过css设置宽度和高度时，就相当于你对一个图片进行了拉伸处理，如果设置的宽高比例和canvas本来的宽高比例不同的话，就会出现变形的情况。
因为通过css设置宽高只相当于对canvas进行缩放操作；所以我们可以通过js来修改canvas标签上的属性来达到我们想要的效果。
举个栗子：
刷新浏览器，正圆又回来了，大功告成~
可以看出fillText实心文字先绘制，strokeText空心文字后绘制，他们坐标一致，所以直接覆盖可实心文字，形成了像文字内部描边通过text-shadow添加文字阴影可以形成对文字的外描边
注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。
可以看下这个文章，关于text-shadow
https://www.cnblogs.com/wuchuanlong/p/5985350.html
