css 缩放_在html5中，为什么最好不要用css去修改画布的大小？

从便利化出发，现在大家都喜欢用css去修改html元素的布局。正因如此，有些小伙伴也用css去修改画布，从而导致异常发生，出现一些奇怪或无用的效果。这是源于canvas元素本身的大小同绘图表面的大小，是两个不同的概念。即canvas元素在尺寸上有两个大小，一个是其本身的大小，另一个是元素绘图表面的大小。

当我们在canvas元素中设置宽与高的属性时，它同时修改了canvas本身的大小与绘图表面的大小。但是，当我们用css来设置canvas元素的大小时，它只会改变canvas本身的大小，而不影响绘图表面的大小。即用css设置canvas元素时，其绘图表面大小依然保持默认值不变(300像素宽、150像素高)。下面用例子予以说明：

①下面图片中代码为在canvas元素中设置画布宽高(见红线处)，其运行结果符合预期(如下面的那张图片所示)。这是因为在canvas元素中通过修改width和height改变其大小时，canvas本身与其绘图表面的大小都会一同改变。如图片代码中所示，它们两者的宽高都分别为600和360。

②下面图片中的html代码中，只是作了小点改变，即用css设置了画布的宽高(见红线处)，其运行的结果完全违背预期，看起来既奇怪又无用。这是因为用css设置canvas的大小，而不同时在canvas元素本身中设置其width和height时，只要canvas元素本身的大小与其绘图表面的大小不同，浏览器就会随机缩放绘图表面的大小，从而导致怪异的结果。本例中，浏览器为调和二者的不同，进行了收缩。但浏览器也可能采用扩放的方式进行调和。但不管是缩，还是放，都会出现令人难堪的意外结果。

总之，在使用画布时，不用css设置canvas元素的大小，应该是明智的选择。