微信小程序中 canvas 层级过高问题

在微信小程序中设置自定义标题后，自定义标题并不能覆盖住canvas

小程序中 canvas、textearea、video等组件使用原生渲染，层级最高，无法通过z-idnex设置进行控制

1在微信小程序的社区也有类型的问题，官方给出的解决办法是将其进行隐藏，在需要时进行显示。

2介于我的问题是canvas显示问题，并且canvas不是实时渲染，可以将canvas在渲染后变成进行展示：wxcanvasToTempFilePath

如果可以用css动画进行解决，也是可以的

1

EChart在某些配置较低的手机上出现无法交互的情况，换成自定义控件解决了这个问题。

2

新建一个自定义组件，布局如下

wxml

根据官方文档的说法，最好使用canvas2d进行绘制。

3

js

通过SelectorQuery获取canvas对象，这里的in方法用于获取自定义组件中的节点。

node属性用于获取节点实例，即canvas对象，size用于获取节点尺寸，就是canvas的宽高。这里有一个坑，通过节点获取到的画布宽高，仅仅是画布的宽高，想要在真机上正常显示，还需要获取手机的密度，并将画布的宽高乘以密度，canvasContext同样缩放屏幕密度倍数。

pixelRatio，官方说明为像素比，应该就是开发android时，1dp等于多少px。

4

绘制柱状图，其实并不复杂，统计图的要素就那么多。

首先是标题，如果需要标题的话，那么就要在绘制标题时，就需要指定标题的样式，然后预留出标题周围需要的边距。然后可以把绘制标题的方法抽取一个单独的方法。

坐标轴，确认坐标轴原点的位置，要考虑预留出坐标轴名称的位置，预留刻度名称的位置。

当获取到数据时，绘制跟数据有关的部分，也就是刷新方法。

如果需要动态刷新，js的canvas需要把原有的画布内容清空，于是要有一个clear方法。

5

提示条canvas的要覆盖在统计图canvas上，同理要根据屏幕密度对画布进行调整。同时初始化一组跟统计图canvas同样的坐标系。

绑定屏幕点击事件bindtouchastart，点击屏幕时记录点击的位置，显示提示条。

6

当手指在屏幕上滑动时，监听事件bindtouchmove，根据滑动距离变化触发页面刷新，统计图canvas，提示条canvas根据需要，是否都需要刷新。

大致思路是这样， 源码 供参考。

在小程序里，我们知道分享功能只有分享到微信好友或者群，无法直接分享到朋友圈，但是我们可以生成分享，然后保存到相册，在发布朋友圈从相册选择，所以关键是如何生成需要的，使用canvas 画布即可实现。

canvas 是微信小程序里的原生组件，相关属性及注意事项可参考小程序官方文档 。一般生成分享需要显示文字和相应的，在结合不同位置和不同大小的需求形成特定样式的。

这一报错在微信开发者论坛中被多次提及，最多被提到的就是这一方法。

wxdraw()是一个异步执行的api，canvasToTempFilePath需要在其回调中执行。延迟 200毫秒 一般就可以解决这个问题。

当这个api只执行一次时延迟200毫秒其实无所谓，但是多次调用时，这个延迟也浪费了不少时间。对于性能强大的手机，这也是一种浪费，一般只有性能较弱的安卓机才会出现这个问题。所以我更建议大家使用下面一个。

canvasToTempFilePath本身也是异步api，有错误回调可以使用。

我的项目中需要绘制的大小为180180px，耗时基本在50-100ms左右。报错一次以后canvas基本也就准备好了，一般不会错第三遍。

题外话：这一个api的耗时与画布大小密切相关，也建议大家绘制时一定要控制好canvas画布大小。比方说，绘制200200的，canvas要大小一致。尤其是数量比较大时，在模拟器上体现不出差别，但是手机上影响很大。

以上就是关于微信小程序中 canvas 层级过高问题全部的内容，包括:微信小程序中 canvas 层级过高问题、微信小程序：自定义柱状图、canvas微信小程序如何导入个人微信等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！