首页 > 代码库 > 设置canvas元素的宽高的奇妙(jiujie)发现

设置canvas元素的宽高的奇妙(jiujie)发现

大家都知道设置一块画布的大小

我们可以这样:

<canvas id="canvas" width="600" height="300">

  
</canvas>

也可以通过css进行设置

#canvas{

  width:600px;

   height:300px;

}

我这样写:

技术分享

效果是这样:

技术分享

可当我在css上也写上同样的尺寸并把canvas元素行内宽高去掉的时候。。。。。

技术分享

技术分享

hellow变的贼大。。明明都是一样的尺寸。

 好吧,其实:

canvas元素有两套尺寸,一个是元素自身的尺寸,一个是绘图表面的尺寸。

设置canvas标签行内的宽高时是同时修改了元素自身的尺寸和绘图表面的尺寸。但是css设置的宽高是针对元素的尺寸的,并没有影响到绘图表面的尺寸。

所以当我只设置了css的元素宽高时,绘图宽高还是不会变,是默认的300*150,浏览器就会把绘图表面拉伸到和元素宽高一样的尺寸。然后就放大了。

 

我这样来:

技术分享

结果是怎样?

行内元素优先级大,所以元素自身尺寸和绘图表面都是300*150?还是元素自身尺寸是600*300,绘图表面也是600*300?

不是说行内宽高会同时设置元素尺寸和绘图表面的大小,那他们应该都是300*150。。

额。。结果

技术分享

元素尺寸是600*300,绘图表面由300*150缩放成600*300,

我理解应该是绘图表面设置成了300*150,元素尺寸是根据css设置的600*300,浏览器缩放了绘图表面,让他和元素尺寸对齐。就如上图。

于是:

技术分享

讲道理应该是绘图表面设置成600*300,元素尺寸设置成300*150

技术分享

是这样的。。。

总结就是:宽高还是在元素行内设置的好。

设置canvas元素的宽高的奇妙(jiujie)发现