canvas展示问题

Question

前端页面中有多个iframe，通过display控制iframe的展示隐藏，每个iframe中都有canvas，当iframe的display值改为none时，该iframe中的canvas宽高变成100*100的大小，怎么能避免这种情况？

Answer 1

暂时不知道因为什么。那你可以考虑一些其他方案，来隐藏你的 iframe。

1. opacity
2. visibity
3. 定位+移出视口
4. 宽高改成0

Answer 2

这个和echarts有同样的问题，比如有下面结构的dom

.parent{
    display: none;
    width: 400px;
    height:400px;
}
.child{
    width: 100%;
    height: 100%;
}

<div class="parent">
  <canvas class="child"></canvas>
</div>

父元素display为none，被移除文档流不占据空间，并且他不会被渲染，所以他的子元素没有机会进行渲染计算，也就得不到应该的宽高值，这时候得到的就是100%，在echarts中会被计算成100px。

解决办法可以像@linong所说的，或者试试iframe显示后重新渲染canvas