1、为什么canvas组件总是会在最上层？ 因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。
2、如何解决canvas层级最高问题？
wx.canvasToTempFilePath转为图片，转为图片就能定义层级了文章来源地址https://www.toymoban.com/news/detail-513672.html
<template>
<canvas wx:if="{{!canvasSrc}}" class="cancas_wh" canvas-id="canvasArc3"></canvas>
<image src="{{canvasSrc}}" class="img_canvas" mode="aspectFill"></image>
</template>
data = {
canvasSrc: '',
}
showScoreAnimation1(copyRightItems) {
//这里是绘制圆
let that = this
// 这部分是灰色底层
let cxt_arc = wx.createCanvasContext('canvasArc1') //创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(6) //绘线的宽度
cxt_arc.setStrokeStyle('#F3F3F3') //绘线的颜色
cxt_arc.setLineCap('round') //线条端点样式
cxt_arc.beginPath() //开始一个新的路径
cxt_arc.arc(this.cxt_xx, this.cxt_xx, this.cxt_rr, 0, 2 * Math.PI, false) //设置一个原点(53,53)，半径为50的圆的路径到当前路径
cxt_arc.stroke() //对当前路径进行描边
//这部分是绿色部分
cxt_arc.setLineWidth(6)
if (copyRightItems <= 100) {
cxt_arc.setStrokeStyle('#509234')
} else {
cxt_arc.setStrokeStyle('#f05b26')
}
cxt_arc.setLineCap('round')
cxt_arc.beginPath() //开始一个新的路径
cxt_arc.arc(
this.cxt_xx,
this.cxt_xx,
this.cxt_rr,
(-Math.PI * 1) / 2,
2 * Math.PI * (copyRightItems / 100) - (Math.PI * 1) / 2,
false
)
cxt_arc.stroke() //对当前路径进行描边
//这里是重点！！只要看这里就行 针对层级问题转图片
cxt_arc.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: 'canvasArc1',
success: function(res) {
console.log(res.tempFilePath, '图片地址')
//uploadImg方法是后台接口，为了上传到阿里云，转为网络图片地址
uploadImg(res.tempFilePath, (url) => {
that.canvasSrc = url
console.log(urlh, '图片线上地址')
that.$apply()
})
},
})
})
}
// 设置
.cancas_wh {
width: 240rpx;
height: 240rpx;
}
// 设置canvas图片的大小
.img_canvas {
height: 280rpx;
width: 280rpx;
}
文章来源：https://www.toymoban.com/news/detail-513672.html
到了这里，关于【微信小程序】解决canvas组件层级最高问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
