首頁  >  文章  >  微信小程式  >  小程式畫布canvas隱藏的問題解決

小程式畫布canvas隱藏的問題解決

hzc
hzc轉載
2020-07-01 09:54:064654瀏覽

相信有很多時候,大家都會遇到要利用canvas畫布生成圖片的時候.
當然我也遇到了, 在專案中wxml頁面中生成的canvas之後,我發現怎麼樣給canvas標籤加css都無法讓canvas不影響頁面,

  <canvas    style="opacity:0;position:fixed;z-index:-9999;">
    // 无论是opacity  还是  z-index 都无法解决,多多少少会影响
   </canvas>

幾番琢磨,想出以下解決方案:canvas外層加父標籤,再控制父標籤的顯示

<view  style="width:0px;height:0px; overflow:hidden"> //让父标签 0宽 0高 隐藏溢出
    <canvas >
    </canvas>
</view>

如果上述不行請看下面這個:

  <canvas style="position:fixed:left:9999px" >
// 直接让canvas 飞到天际,  简单粗暴;   使用时注意 position的问题; 如果 fixed不行, 换其他定位试试
    </canvas>

ok  ..  加油寫程式碼吧...

推薦教學:《 微信小程式

以上是小程式畫布canvas隱藏的問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jianshu.com。如有侵權,請聯絡admin@php.cn刪除