uni-app踩坑之canvas绘制不显示

uni-app踩坑之canvas绘制不显示

问题描述：

• 如下图所示，我用canvasShow来控制 canvas相关dom的隐藏与出现
• canvasShow的默认值为false，当canvasShow的值第一次变为true时，绘制的矩形并不能出现；之后就能正常出现了。

问题分析：

1. 在canvasShow第一次变为true之前，dom是这样的
   
   可以看出,canvas的width height都为0，而这个时候canvas的父级是被隐藏的；经过测试我们可以得出结论：uni-app中canvas的width height的值依赖于父元素的宽高。

2. canvasShow第一次变为true,dom是这样的
   
   这个时候，由于父元素出现了，所以canvas的宽高也就有了。但是，canvas绘制的矩形并不能显示

3. 之后canvasShow再次变为true，canvas都能正常显示绘制的矩形。因为经过第一次canvasShow变为true后 canvas dom的width height就一直存在了。

问题解决

将绘制方法写在异步方法中