|
|
canvas的宽高怎么自适应?
我写html5页面,想让canvas的宽高自适应浏览器页面宽高,但是总是被拉伸了,有什么解决办法可以让canvas自适应而且不被拉伸吗?
关注者
60
被浏览
178,574
8 个回答
简单的答案是：
当我们在说自适应的时候，我们说的是 css layout dimensions 自适应，亦即元素的 display size。
而 canvas 的 width/height 属性对应的是画布内的 coordinate space，并不归 CSS 管。
于是，canvas 的显示大小可以由 CSS 规则指定，做到显示自适应，但其内部像素并不对应 CSS 像素或屏幕物理像素，也就是说缩放显示。
===========================================
如果你需要让 canvas 的 coordinate space 始终跟随窗口大小的话，可以用 js 设定 canvas 高宽为窗口高宽 x 设备像素密度，并且监听 window resize 事件，使 canvas 高宽随着窗口大小的变化而变化。
另外， canvas 的高宽改变时，画布内容会被清空，需要重新绘制。
你把canvas当作一张图片就能理解了,你canvas的样式宽高改变了,但是canvas自身的宽高却是不变的,这两个宽高是不同的,两者的宽高比不同,对应的就是内容被拉伸.
不想内容变形,一个是维持canvas的样式宽高比跟画布的宽高比一致,另一个就是根据样式的宽高比来重新设置画布的宽高比,这必须重新绘制内容.