Canvas大小的修改有三种方法：
方法一： 通过CSS样式来控制canvas元素，具体代码如下：
1 | canvas { width: 600px; height: 300px} |
方法二： 直接在canvas标签内定义width和height，具体代码如下：
1 | <canvas width='600' height='300'></canvas> |
方法三： 在JS代码里面设置width和height， 在var ctx = myCanvas.getContext('2d') 后面追加如下代码：
1 | myCanvas.width = 600; |
设置canvas标签css的width属性，和直接设置canvas的width属性，结果是不一样的。原因如下：
canvas标签包含元素本身以及元素绘图表面，它们各自有自己的尺寸大小。当直接设置canvas标签的width时，会同时改变元素本身的大小和元素绘图表面的大小，此时，显示效果不发生改变(只有等比例变化)；设置canvas css中width的属性时，只改变canvas本身的大小，而不改变元素绘图表面的大小，此时，元素绘图表面为适应canvas元素的尺寸，会进行拉伸或缩小，导致显示效果变化。
height 和 style.height 同理。
