习惯性的把宽高写在了style中，发现画出的图与实例不一致，经过了拉伸，经查询得知：
canvas跟其他标签一样，也可以通过css来定义样式，但需要注意的是：canvas的默认宽高为300px*150px，在css中为canvas定义宽高，实际上把宽高为300px*150px的画布进行了拉伸，这样得到的图形就是变性的效果，因此在canvas绘图时，应该在canvas标签中直接定义宽高。
<canvas width="400" height="300"></canvas>