Solving the problem of mini program canvas hiding

I believe that many times, everyone will encounter the need to use canvas to generate pictures.
Of course I also encountered it. After generating the canvas in the wxml page of the project, I found out how to add css to the canvas tag. I can't prevent the canvas from affecting the page.

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

After thinking about it for a while, I came up with the following solution: Add a parent tag to the outer layer of canvas, and then Control the display of the parent tag

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

If the above does not work, please see the following:

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

ok .. Come on and write the code...

Recommended tutorial: " WeChat Mini Program》

The above is the detailed content of Solving the problem of mini program canvas hiding. For more information, please follow other related articles on the PHP Chinese website!