之前开发模型渲染功能时,有一个特效是通过给目标canvas添加、修改filter属性实现。当时我发现一个问题:仅仅添加、修改filter一个属性后,canvas内容会被拉伸,导致滚动条出现(如下图,外层div宽高为337.5*745,但内层canvas宽高却为1012*2235),就算添加固定高度也没效果。昨天处理移动端适配,发现这个问题在移动端影响更大。最终我是通过动态改变canvas宽高完美解决了此问题。
首先使用window.getComputedStyle()方法获取canvas父级容器宽高;然后连着“display:block;"一起赋给canvas;这时canvas宽高就是我们动态赋予的值,大小合适,不会拉伸溢出!