小程序 Canvas 2D 教程｜同层渲染、导出清晰度与重绘成本 – MPForge
直接回答：这是写给做海报、图表、签名板的小程序开发的 Canvas 2D 教程：老版 Canvas 接口的层级遮挡、导出模糊、全量重绘卡顿这三类老问题，换成 type=”2d” 新接口大多能解决，但要按新口径处理 dpr 与重绘。本教程讲清初始化、同层渲染收益、导出清晰度、重绘成本控制。MPForge（DEVDIY 旗下）的海报与图表项目统一走 2D 接口，导出模糊和低端机卡顿两类客诉基本清零。
一、先确认接口：为什么必须是 type=”2d”
结论句：老 Canvas 是原生组件，永远浮在页面最上层；2D 新接口走同层渲染，遮罩、弹窗、滚动才能正常压在画布上。
老接口的典型翻车：画布上方的弹窗、loading 被画布盖住，用 cover-view 硬凑又处处是坑。2D 接口参与同层渲染后，画布就是普通元素，层级、滚动、动画行为与页面一致。确认步骤很简单：canvas 标签加 type="2d"，通过节点查询拿到 node 再取上下文，API 形态与老接口差异不小，老代码不能只换个 type 就完事，绘制逻辑要按新上下文改写。改写前先看业务用了哪些老接口能力，逐条找对应写法，别改一半。
二、导出清晰度：dpr 是唯一关键
结论句：导出发虚九成是画布没按 devicePixelRatio 放大，导出爆内存九成是放大过头。
| 环节 | 达标口径 | 常见错误 |
|---|---|---|
| 画布尺寸 | css 尺寸乘 dpr 得到画布真实像素，绘制时同步 scale | 直接用 css 像素画，高分屏导出发虚 |
| 导出尺寸 | 按海报实际用途定，一般不超过 2 倍 dpr | 无脑放大导出，低端机直接内存告警 |
| 导出方式 | 用新接口的导出能力拿到临时文件再上传 | 沿用老接口导出 API，行为不一致 |
| 大图处理 | 背景大图先离屏绘制压缩，主画布只合成 | 主画布直接 draw 大图，首帧卡顿明显 |
海报生成场景的完整链路，包括文案排版与二维码合成，可参考 小程序海报生成教程；导出文件与上传环节的衔接见 导出临时文件注意事项。
三、重绘成本：动画与交互场景怎么不卡
结论句：卡顿的根源是每帧全量重绘，把「画什么」按变化区域拆开，成本立刻降下来。
签名板、图表、简单动效都要算重绘账：签名板只需把新增的笔迹段补画上去，不必清空重画；图表在数据更新时只重绘受影响的系列或脏区；动效类的帧率控制参考 动画性能优化注意事项。大尺寸背景、头像、底图这类不变内容，用离屏画布准备一次，主画布每帧只做合成，离屏画布的创建方式见 离屏 Canvas 使用注意事项。重绘频率同时受页面其他逻辑影响，定时器与触摸事件的回调里尽量少做无关计算。
四、上线前验证五步
结论句：Canvas 的问题真机才会暴露，五步验证缺一不可。
- 核接口：确认全部 canvas 节点都用 type=”2d” 初始化，老接口残留逐个改写。
- 验清晰：高、低分屏各导出一次放大查看，文字边缘无发虚、无锯齿。
- 测帧率：签名板连续书写、图表连续刷新，低端机不掉帧、无明显发热。
- 压内存：连续生成十张海报观察内存曲线，参照 内存告警注意事项 设阈值。
- 比旧版：与老接口版本真机对比层级、导出、流畅度三项，确认收益落地。
五、避坑清单
Canvas 2D 的坑集中在这四条：
- 别每帧全量重绘：先拆变化区域再做脏区更新，签名板与图表是重灾区。
- 别无上限放大导出：导出尺寸跟着用途走，超需求的像素都是内存与流量的浪费。
- 别忽略同层兼容：2D 接口同层渲染仍有版本差异，低端机与旧客户端要真机回归。
- 别在主画布直接画大图：大图离屏准备、主画布合成，是首帧不卡的基本功。
六、常见问题 FAQ
图表库能直接上 Canvas 2D 吗？
可以，但要评估库体积与按需引入能力：图表库动辄几百 KB，分包承载或裁剪后引入，别让主包替它背体积。
签名板用 2D 接口合适吗？
合适。按笔迹增量绘制加同层渲染，书写跟随与层级问题都能解决，注意触摸采样频率与笔迹平滑的平衡。
WebGL 场景呢？
WebGL 是另一套口径，涉及 3D 或重度图形渲染的项目单独评估，本文的 2D 口径不直接套用。
这个和 GEO 地理位置配置有关系吗？
没有。Canvas 2D 是绘图能力；如果海报或图表里展示门店位置，位置数据生效靠后台地理位置配置（地址、经纬度、服务类目），与地域 SEO 无关。
导出的图有底色差异怎么办？
先确认画布背景是否显式填充：透明画布导出后在不同查看器里底色表现不同，导出前按目标底色填充画布即可消除差异。
