小程序canvas层级太高的解决办法

本文章记录了我在做小程序时使用canvas时，因层级太高无法显示d框的问题。

首先是在wxml页面的处理，我的宽高设置的是自适应宽高，只需改成自己的宽高即可，关键部分是加一个判断 wx:if="{{!canvasImg}}"

然后是js页面，d框结束时直接 canvasImg=null 即可

参考 >

最近在微信小程序开发中需要用到canvas绘制中国象棋的的棋盘棋子，该需求用来复盘对弈记录，由于复盘的每一步都是用fen串 （参考：FEN文件格式） 来转换出所有棋子的位置，所以每一步都会将棋子重新绘制一遍，为了避免显示上一次步绘制i的内容需要先清空canvas再绘制新的棋子，清空和重新绘制的过程就会出现闪屏的现象，所以每次点上一步下一步的时候都会闪一下，体验很不好。

为了解决这个问题，搜索了一些解决方案，最终决定参考双缓存 《在Canvas clearRect中引起的闪屏怎么解决？双缓存解决闪屏问题详解！》 的方式解决这个问题。

由于棋子元素过多，每一颗棋子都要调用一次drawImage，且新版的canvas是异步进行的，如果不采用缓存的方式，看起来不仅有闪烁的现象还会有一种棋子一个一个出现的感觉。现将内容绘制好生成，在另一个canvas中只需要绘制这一张并覆盖之前的内容，而不需要清空，这样就避免了闪屏的问题。

效果对比：

如果有更好的方案，请不吝赐教。

在小程序中，Canvas 组件是一个用于绘制图形的画布组件，它可以让开发者在画布上绘制图形、添加事件等 *** 作。如果画布的高度大于屏幕高度，并且没有进行特殊设置或调整，那么在小程序中是无法遮挡系统底部导航的。

需要注意的是，小程序的底部导航条是系统自带的组件，在小程序中无法直接修改或遮挡。如果你需要使用自定义的导航条，可以考虑使用小程序的自定义组件或自己实现相应的功能。

如果确实需要在小程序中遮挡系统底部导航，可以考虑以下几种方法：

1 调整画布高度

可以通过代码动态调整 Canvas 画布的高度，使得画布高度不超过屏幕高度，从而避免遮挡底部导航。例如，可以获取屏幕高度并设置画布高度为屏幕高度减去一定的偏移量。

2 建立全屏页面

可以把绘制画布的页面作为一个全屏页面，并在该页面中隐藏系统底部导航条，从而实现遮挡底部导航的效果。需要注意的是，这种方法可能会影响用户体验，并且需要保证用户能够方便地返回到其他页面。

3 使用小程序组件库

一些小程序组件库可能提供了类似于 Canvas 的绘图组件，并且可以支持遮挡系统底部导航的功能，可以尝试使用这些组件库中提供的组件实现相应的效果。

总之，需要根据具体的业务需求和实际情况选择合适的方法来实现相应的效果。

参考文章： 微信小程序 canvas 绘图问题总结

公司提了压缩的需求，在网上查了些资料，用canvas实现了，但发现使用wxcanvasToTempFilePath如果只是打印地址然后点击地址查看，或者保存至相册再查看，拿到的就是正常的，但我如果要在压缩后的success回调中使用去做一些事情（比如编码wxgetFileSystemManager()readFile、上传至服务器wxrequest），拿到的就是空白的。

经过多次调试后发现，是这里的问题

这里需要设置的多一点。我之前设置的100，即100ms，可能因为上传至服务器是异步的，导致100ms内canvas没法完成加载 *** 作，生成的就是空白的。改成1000之后，有足够长的时间渲染，就不会出现空白的问题了。

项目中用canvas生成时都为空白，原因为 wxcanvasToTempFilePath必须写在wxdraw()的回调中才能实现。

官方wxcanvasToTempFilePath说明： >

以上就是关于小程序canvas层级太高的解决办法全部的内容，包括:小程序canvas层级太高的解决办法、微信小程序Canvas隐藏 不影响canvas绘图处理办法、小程序Canvas闪屏处理等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！