Canvas设置width和height问题

首先HTML5中新增画布标签<canvas></canvas>，所以有些老版本的浏览器是不支持的

使用canvas标签需要知道以下几点：

1.需要在HTML文档中指明canvas标签，在canvas标签中需要写一些提示信息

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

　　您的浏览器不支持Canvas

</canvas>

2.canvas元素默认大小是300px*150px，我们设置宽高的时候，需要使用canvas标签中的width和height属性，而不是css中的width和height属性

正确设置宽高写法是：

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

　　您的浏览器不支持Canvas

</canvas>

错误设置宽高写法是：

<canvas id="canvas" style="width: 500px;height: 500px;">

　　您的浏览器不支持Canvas

</canvas>

这里在行内样式和内联样式中设置canvas的width和height都是错误的，

这样做会让canvas的宽高被拉伸或缩小，从而使得绘制的图形并不跟预想的一样。

如果这样说的不透彻的话，也可以这样理解：

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

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

　　您的浏览器不支持Canvas

</canvas>

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

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

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

这里列举的例子是为了我们更好的理解这两种情况，至于为什么，浏览器或者HTML5特此为这两种需求而设置的两种不同的操作宽高的方法，我们记住可以了