微信小程序解决canvas组件层级最高问题-微信小程序最难的是组件-微信小程序组件开发-即速应用

微信小程序解决canvas组件层级最高问题-微信小程序最难的是组件-微信小程序组件开发

浏览量：2121 时间：2020-04-06 来源：HardStudy98

1.
问题截图
2.
1、为什么canvas组件总是会在最上层？因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置z-index为多少都无法盖在原生组件上。
3.
2、如何解决canvas层级最高问题？解决思路：使用wx.createCanvasContext通过canvas-id创建canvas绘图对象，在绘制完画布之后生成图片，在页面内使用image组件展示画布生成的图片，同时给canvas组件加一个fixed定位设定一个超过页面的高宽top或者left值。
4.
3、代码实现
//js文件letctxwx.createCanvasContext("canvasRound",this);//根据wxml定义的canvas-id来创建绘图context对象。ctx.draw(false,(){//延迟保存图片，解决生成图片错位bug。setTimeout((){this.canvasToTempImage();},400);});canvasToTempImage:function(){wx.canvasToTempFilePath({canvasId:"canvasRound",success:(res){lettempFilePathres.tempFilePath;this.setData({imagePath:tempFilePath,});}},this);}//wxml文件imagesrc"{{imagePath}}"class"lucky-index-img"/imagecanvasclass"lucky-index-round"canvas-id"canvasRound"/canvas//wxss文件.lucky-index-round{position:fixed;top:9999rpx;left:0;width:188rpx;height:188rpx;}