【uniapp】小程序canvas层级过高的问题

最近开发一个小程序，里面有关天气温度的折线图是用canvas来实现的，但是在真机模拟的时候发现一个position: fixed属性的盒子被canvas压住了

 当然开发者工具里显示不出来，但是到真机上就出现层级过高的问题了

说说我解决的过程中遇到的坑吧

一、z-index

第一反应肯定是用z-index来提升按钮的层级和降低canvas的层级，显然意料之中的失效，因为canvas等一些原生组件层级很高。

二、cover-view

然后想到的是cover-view

但是使用后发现它并不能固定在屏幕右下角，后来发现uniapp的cover-view不支持下面的css

三、canvasToTempFilePath

这是在社区找到的方法，也是我自己用的方法，就是将canvas导出成图片

canvasToTempFilePath

根据文档的提示把他放在draw()方法的回调里面

一运行，啪、报错：

canvasToTempFilePath: fail canvas is empty"

后来才发现官方的文档里有个这个东西

 

 经过一番折腾终于在控制台打印出来本地图片路径，结果点开一看，好家伙一片乌漆嘛黑

奈何只能又去度娘询问，经过高人指点终于知道问题所在

在导出图片的时候画布还没有画完或者说 没有画？只要给它加个延迟操作即可

最终成品代码如下

                cvs.draw(false,
					setTimeout(() => {
						wx.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: 1150,
							height: 40,
							destWidth: 3450,
							destHeight: 120,
							canvasId: 'weather-canvas',
							fileType: 'png',
							success(res) {
                                console.log(res.tempFilePath);
							},
							fail: function(res) {
								console.log(res);
							}
						}, that)
					}, 500)
				)

终于大功告成，然后只要把canva替换成image就可以了

tip:如果canvasToTempFilePath导出来的图片不清晰只要把导出图片的大小也就是destWidth和destHeight设置成canvas大小的倍数即可

四、Canvas 2D

 官方有说用2d支持同层渲染，但是放在自定义组件中还是原生渲染，所以我没有用这个方法（之前用过，但是好像有啥问题就没用）

 

最后，如果有什么错误的地方 希望大佬们能指正，这个也只是我自己的解决问题的方法，肯定不是最好的，但是希望对一些人有帮助，谢谢~