uni-app踩坑之canvas繪製不顯示
問題描述:
- 如下圖所示,我用canvasShow來控制 canvas相關dom的隱藏與出現
- canvasShow的默認值爲false,當canvasShow的值第一次變爲true時,繪製的矩形並不能出現;之後就能正常出現了。
問題分析:
-
在canvasShow第一次變爲true之前,dom是這樣的
可以看出,canvas的width height都爲0,而這個時候canvas的父級是被隱藏的;經過測試我們可以得出結論:uni-app中canvas的width height的值依賴於父元素的寬高。 -
canvasShow第一次變爲true,dom是這樣的
這個時候,由於父元素出現了,所以canvas的寬高也就有了。但是,canvas繪製的矩形並不能顯示 -
之後canvasShow再次變爲true,canvas都能正常顯示繪製的矩形。因爲經過第一次canvasShow變爲true後 canvas dom的width height就一直存在了。
問題解決
將繪製方法寫在異步方法中