canvas层级过高是原生限制，z-index无效；需开启mp-weixin.canvas2d并设position: fixed，仅cover-view可覆盖，且须适配pixelRatio处理真机坐标偏移。

canvas层级过高是原生限制，z-index完全无效

这不是你代码写错了，而是微信小程序底层渲染机制决定的：canvas（包括type="2d"和type="webgl"）属于原生组件，渲染在WebView层之上，普通view、button甚至picker都压不住它。你加再多z-index、改再多次position都没用——真机上根本不起作用。

必须开启mp-weixin.canvas2d并设position: fixed

想让canvas参与同层渲染（即能被cover-view盖住、能受CSS层级影响），两个条件缺一不可：

• manifest.json中开启"mp-weixin": { "canvas2d": true }
• canvas组件的style里必须显式写position: fixed;（absolute不行，relative更不行）
• 不能用v-if控制显隐，得用v-show或直接操作display: none

示例写法：

<canvas canvas-id="myChart" style="position: fixed; top: 100rpx; left: 50rpx; width: 300rpx; height: 200rpx;"></canvas>

Wechat MP Article Stats Comments Suite - 微信公众号管理套件

公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。

下载

cover-view是唯一能盖住canvas的组件

只有微信原生提供的cover-view和cover-image能真正叠在canvas上面，其他所有view类组件都会被压在底下。

• cover-view不支持background-image、border-radius（圆角可能失效）、%单位（只认rpx或px）
• 事件绑定要加catchtouchstart兜底，尤其在安卓机上@click容易失灵
• 不能嵌套普通view，子节点只能是cover-view、cover-image或纯文本

真机坐标偏移？pixelRatio没处理好

同层canvas在开发者工具里看着正常，真机上图形模糊、位置错位、点击区域偏移——大概率是没适配设备像素比。

• 别信offsetWidth，要用wx.createSelectorQuery().in(this).select('#myCanvas').boundingClientRect()拿真实布局尺寸
• 创建2D context时，手动把width/height设为rect.width * pixelRatio和rect.height * pixelRatio
• 微信开发者工具默认pixelRatio=1，真机通常是2或3，不处理就必然出问题

最常被忽略的点是：canvas容器宽高（CSS像素）和绘图上下文宽高（物理像素）必须分开设置，混用就会导致缩放错乱或裁剪。