canvas的width和height

<canvas>可看做“画板”和“画纸”层叠。

在没有给<canvas>设置width和height属性时，默认width = "300px",height = "150px"。

    html : 设置<canvas>的id为"mfc"，标签中的文字是当浏览器不支持canvas标签时显示的替代文字，如果支持canvas则不会看到这段文字

在<canvas>里给它设置宽和高都为300，即设置了一个大小为300*300的画纸。

    css : 设置背景色为绿色。

    js : 

此时在页面上加载出的图是这样的：

如果此时，将css中设置width和height，即

那么本来跟画纸大小一样的画板现在变成了一个width是画纸2倍大的画板，即600*300的画板，那么此时，画纸会想把画板填满，即会想变成跟画板一样的宽度——600px，那么画纸上的图像就会扭曲，变成这样：

如果画板的宽*高跟画纸的宽*高不成比例的话，画纸上的图像就会变形扭曲，如果将画板的宽*高设置成600*600，即与画纸成比例，则图像不会扭曲，只会变大：

综上所述，最好不要给<canvas>设置css中的width和height，如果不设置，那么画板的大小会和画纸的大小一样，不会出现图像扭曲的情况。

参考：https://blog.csdn.net/xiaoritai7803/article/details/79597989

          https://blog.csdn.net/u012468376/article/details/73350998