这样理解：

比如我们在生活中要挑选一块画布用来画画，当我们去市集上挑选画布的时候，发现画布的尺寸大小有各种各样的，但是我们的画板大小是500*500的，所以我们需要挑选一块500*500的画布，在这里我们需要使用第一种写法：

<canvas id="canvas" width="500" height="500">

　　您的浏览器不支持Canvas

</canvas>

来挑选正确的合乎画板尺寸的画布，因为这种写法正好是为了我们挑选画布的尺寸而设计的。

买回来画布后，我们需要绘制更大更宽的画，所以我们把原来的画板尺寸增加了，但是我们又不想麻烦再跑市集一趟去挑选画布，这里假设我们之前买的画布是有弹性的，可以被拉伸并且可以正常使用。

这种情况下就可以使用css中的width和height属性设置画布的宽和高（行内样式和内联样式）来拉伸画布的大小，但是这里需要注意一点的是：我们是在画布默认尺寸大小300*150的基础上面拉伸的。但是经过拉伸后的画布在绘制图画的时候会跟预想的结果不太一样。