微信小程序canvas层级高是原生限制，z-index无效；需启用同层渲染（manifest加canvas2d:true且canvas设position:fixed）或转为图片降级。
canvas层级高是原生限制，z-index完全无效
微信小程序的canvas（含type="2d"和type="webgl"）默认走 native 渲染通道，和view不在同一渲染层。这意味着无论你给uni-popup、picker还是cover-view外层加多大的z-index，只要没用对机制，就压不住它。
常见错误现象包括：uni-popup弹出后内容被裁剪、下拉菜单点不中、video控制条消失、iOS 和 Android 表现不一致（iOS 更顽固）。
- 别在
canvas上试position: absolute或z-index——它只认position: fixed（且仅用于同层渲染触发） - 不要用
v-if控制canvas显隐，否则同层上下文销毁，再显示会白屏或错位 -
cover-view能盖住canvas，但它的子节点只能是cover-view或cover-image，嵌套view直接不渲染
启用同层渲染必须同时满足两个硬条件
只有开启同层渲染，canvas才能和cover-view共存于同一“覆盖层”，这是唯一能让其他元素真正叠在它之上的路径。
缺一不可：
- 在
manifest.json的"mp-weixin"字段下添加"canvas2d": true -
canvas标签必须带style="position: fixed;"，且宽高单位建议用rpx或px（不能用%） - 显隐必须用
v-show或display: none/block切换，不能用v-if
示例写法：
<canvas canvas-id="myCanvas" style="position: fixed; top: 100rpx; left: 50rpx; width: 300rpx; height: 200rpx;"></canvas>
cover-view不是万能胶，样式和事件有硬限制
cover-view是唯一能稳定盖在同层canvas之上的组件，但它不是view的替代品。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
容易踩的坑：
-
background-image、border-radius（圆角）、box-shadow基本无效，iOS 尤其明显 - 只支持有限样式：
width/height/top/left/color/font-size等，单位必须是rpx或px - 安卓部分机型
touchstart可能失灵，建议加catchtouchstart兜底 - 不能嵌套普通
view，文字得用cover-view，图标得用cover-image
canvas转图片是最稳妥的降级方案
当交互不频繁、图表内容静态或半静态时，用wx.canvasToTempFilePath导出为image，彻底退出 native 渲染层，回归 DOM 层叠逻辑。
关键实操点：
- 调用时机必须在
ctx.draw()完成后的success回调里，或加setTimeout延时确保绘制完成 - 导出尺寸要和
canvasCSS 宽高匹配，否则拉伸或裁剪；真机需乘pixelRatio（开发者工具常为 1，真机多为 2~3） - 导出后立刻
v-show="false"隐藏原canvas，避免双层重叠或闪烁 - 适合场景：仪表盘、统计图、海报生成、非实时数据展示
示例片段：
uni.canvasToTempFilePath({<br> canvasId: 'myCanvas',<br> x: 0,<br> y: 0,<br> width: 375,<br> height: 200,<br> success: (res) => {<br> this.chartImg = res.tempFilePath;<br> this.showCanvas = false;<br> }<br>});
真机坐标偏移、模糊、白屏，八成是pixelRatio没处理，或者boundingClientRect拿的是 CSS 尺寸而非物理像素尺寸——这点最容易被忽略。
