微信小程序 canvas 层级过高 解决方案

思路：

baidu上 关于小程序canvas层级过高 的的解决方案，大致分为两种：

将canvas标签替换为图片：

setTimeout(()=>{wx.canvasToTempFilePath({x:0,y:0,width:168,height:168,canvasId:'Canvas',success:(res)=>{this.setData({canvasImg:res.tempFilePath});console.log('canvasImg',this.data.canvasImg)}});},1000);

使用cover-view（小程序层级最高的标签）去覆盖canvas标签：

关于cover-view的小程序官方文档

两种方案的不足：

方案1需要等待canvas渲染完成后再生成图片去替换，且canvas标签不能使用display:none；或 opacity: 0;去隐藏，所以这会导致在canvas渲染完成后仍然会闪动一下再切换成图片显示。

方案2要修改被覆盖的标签，将其层级提到最高。在阅读官方文档后，我就把页面底部的tab栏的view标签替换成了cover-view，结果导致icon消失了…这又是一个bug？

“所以这就结束了？哦，不！，乔治，我们不能就这样放弃！”

“有时候，生活会出其不意地带给我们灵感” ——鲁迅

灵感来源：

在午饭后刷b站时，我刷到一个关于游戏开发的视频，里面提到这样一件事：游戏开发者通常会提前将模型加载好 并放在玩家不可见的区域，等需要用到它的时候再把他挪到玩家眼前。

解决方案：

所以我可以将canvas标签挪到用户不可见的区域，在渲染时用loading动画代替，渲染完成后再将loading动画替换成图片！！

1、首先绘制canvas并生成图片

initCanvasFun(caseTypeList){varcontext=wx.createCanvasContext('Canvas',this);vararray=caseTypeList.map(t=>t.count);varcolors=["#8E92F4","#ECD67D","#E77E7F","#6AE29D","#6644ff"];vartotal=0;for(varval=0;val<array.length;val++){total+=array[val];}varpoint={x:84,y:84};varradius=84;for(vari=0;i<array.length;i++){context.beginPath();varstart=0;if(i>0){for(varj=0;j<i;j++){start+=array[j]/total*2*Math.PI;}}varend=start+array[i]/total*2*Math.PI;context.arc(point.x,point.y,radius,start,end);context.lineTo(point.x,point.y);context.setStrokeStyle('transparent');context.setFillStyle(colors[i]);context.fill();context.closePath();context.stroke();}context.draw();setTimeout(()=>{wx.canvasToTempFilePath({x:0,y:0,width:168,height:168,canvasId:'Canvas',success:(res)=>{this.setData({canvasImg:res.tempFilePath});console.log('canvasImg',this.data.canvasImg)}});},1000);},

2、在canvas标签的style属性中设置绝对定位，将其放到视口外

<canvascanvas-id="canvascrime"wx:if="{{!canvasImg2}}"style="width:168px;height:168px;opacity:0;position:absolute;left:-1000rpx;"></canvas>

3、随便写一个加载动画占位，在图片url生成后被图片标签替换

<viewclass="loading-box"wx:if="{{!canvasImg2}}"><viewclass="loading-left"></view><viewclass="loading-right"></view></view>

.loading-box{position:absolute;width:260rpx;height:260rpx;/* background-color: rebeccapurple; */}.loading-left{position:absolute;left:50%;top:50%;height:50rpx;width:50rpx;border:8rpx solidrgba(0,0,0,0);border-left:8rpx solidrgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);animation:clockwise 2.2s infinite;/* z-index: 10; */}.loading-right{position:absolute;left:50%;top:50%;height:50rpx;width:50rpx;border:8rpx solidrgba(0,0,0,0);border-right:8rpx solidrgba(255,255,255,0.2);border-radius:50%;transform:translate(-50%,-50%);animation:clockwise 2s infinite;}@keyframesclockwise{from{transform:translate(-50%,-50%)rotate(0deg);}to{/* width: 200rpx; */transform:translate(-50%,-50%)rotate(720deg);}}

完成效果：

完美解决，看起来就很“大数据”

参考： https://blog.fasterinfo.info/archives/1939