uni-app使用canvas层级过高解决
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
效果图解决方法在canvas画完图后,使用uni.canvasToTempFilePath生成本地图进行展示注意:生成图片的时候用setTimeout延迟一下,否则生成的图片会为空代码
第一个圆drawProgressbg:function(){//自定义组件实例this,表示在这个自定义组件下查找拥有canvas-id的varctx=uni.createCanvasContext('cpbg',this);ctx.setLineWidth(12);//设置圆环的宽度ctx.setStrokeStyle('#F5F5F5');//设置圆环的颜色ctx.setLineCap('round');//设置圆环端点的形状ctx.beginPath();//开始一个新的路径ctx.arc(56,60,50,Math.PI,2*Math.PI,false);//设置一个原点(110,110),半径为100的圆的路径到当前路径ctx.stroke();//对当前路径进行描边ctx.draw();letthat=thissetTimeout(()=>{uni.canvasToTempFilePath({canvasId:'cpbg',success:function(res){console.log('res1',res)that.cpbgCanvasImg=res.tempFilePath}},that)},500)},第二个圆drawCircle:function(step,total){varctx=uni.createCanvasContext('cpbar',this);ctx.setStrokeStyle('#4C77F4');ctx.setLineWidth(12);ctx.setLineCap('round');ctx.beginPath();//参数step为绘制的百分比step=(step/total)+1;if(step>=2){step=step%2;}ctx.arc(56,60,50,Math.PI,step*Math.PI,false);ctx.stroke();ctx.draw();letthat=thissetTimeout(()=>{uni.canvasToTempFilePath({canvasId:'cpbar',success:function(res){console.log('res2',res)that.cpbarCanvasImg=res.tempFilePath}},that)},500)} -全文完-