uni.createcanvascontext 创建上下文后，必须用 uni.getimageinfo 获取合法 tempfilepath 才能 drawimage；需手动设置 canvas.width/height 及绘图参数乘以 dpr，且 canvas 不能用 v-if 控制显隐。
uni.createCanvasContext 创建上下文后，直接传本地路径给 drawImage 即可，但必须确保路径是合法的临时文件路径（如 tempFilePath），不能是相对路径字符串或未处理的 /static/xxx.png。
canvas 绘制本地图片前必须校验路径格式
很多“图片不显示”问题，根源是把开发时能跑通的静态路径当成了 canvas 可用路径。uni-app 的 Canvas 在各端对图片源要求极严：
-
/static/logo.png这类路径在 H5 可能显示，但在小程序和 App 端会静默失败或报invalid image path - 真正可用的是通过
uni.chooseImage、uni.getFileSystemManager().readFile或uni.downloadFile返回的tempFilePath字符串 - 哪怕你只是想画一张项目里的 logo，也得先用
uni.getFileInfo或uni.getImageInfo把它转成临时路径（getImageInfo对本地路径支持更稳）
正确加载并绘制本地图片的三步流程
别跳步骤，少一步都可能白屏：
- 调用
uni.getImageInfo({ src: '/static/bg.png' })获取图片元信息，成功回调里拿到res.path—— 这才是 canvas 能认的路径 - 创建上下文：
const ctx = uni.createCanvasContext('myCanvas', this)，注意第二个参数this不能漏，否则 App 端失效 - 用
ctx.drawImage(res.path, x, y, width, height)绘制；若需等比例缩放，建议先读res.width/res.height再计算目标尺寸
为什么 drawImage 有时坐标偏移或拉伸模糊
这不是图片本身的问题，而是 canvas 像素比没对齐：
- 如果 canvas 元素样式设了
width: 750rpx; height: 1200rpx;，但没设置canvas.width和canvas.height属性，那实际绘图区域仍是 300×150 物理像素，所有drawImage坐标都会被自动缩放拉伸 - 必须手动设置：
canvas.width = 750 * dpr、canvas.height = 1200 * dpr（dpr来自uni.getSystemInfoSync().pixelRatio） - 所有
drawImage的x、y、width、height参数也得乘以dpr，否则图像内容会糊、位置会偏
常见错误现象与对应检查点
遇到空白、错位、模糊，按这个顺序快速定位：
- 控制台是否报
canvas context not found？→ 检查canvas-id字符串是否和createCanvasContext第一个参数完全一致，且<canvas></canvas>标签在当前组件<template></template>内，没被v-if移除 - 图片只显示左上角一小块？→ 检查
drawImage的宽高是否用了 rpx 值而非乘过dpr的物理像素值 - 文字和图片错层？→ 所有坐标（包括
fillText的x/y）必须统一乘dpr，不能一部分乘、一部分不乘
最易被忽略的一点：canvas 元素不能用 v-if 控制显隐，哪怕只是“暂时隐藏”，也会导致上下文断连；要用 position: fixed; top: -9999px 或 opacity: 0 替代。
