-canvas-listed

# 小程序 Canvas 预览与视觉验证工作流 > 教备神器 · 工具模块。本地静态服务 + Selenium 截图，零业务依赖。 ## 这是什么（给人看） 小程序 Canvas 改完样式，最怕"盲改"——肉眼看不出格子歪没歪、字偏没偏。本技能给你一套**可复现的视觉验证**：本地起一个预览服务，Selenium 自动打开预览页、执行你要的 JS（切模板/改参数）、截图，还能按场景把顶部/中部/底部裁出来做回归对比。任何微信小程序 Canvas 项目通用，告别凭感觉。 - 已附 `selftest.py`：启动服务并确认资源可访问，PASS 才算工作流可用。 ## 何时使用 - "起个预览服务看看效果" / "帮我截图验证一下 Canvas" - 改了网格/文字/颜色，想确认没歪、没偏、没糊 - 想做视觉回归（这次截图 vs 上次截图对比） ## 工作流（AI 必读） ``` 1. 起服务：node preview-server.js <工具目录> [port] # 默认 9099 2. 浏览器开 http://127.0.0.1:9099/<preview.html> # Canvas 效果 = 小程序效果 3. 验证脚本：python verify_shot.py --url <url> --script "<JS>" --out ./shots --crop 4. 目检 / 对比 ./shots 下的 整页 + 顶/中/底 裁剪图 ``` ## 核心脚本签名（AI 直接调用） ```bash # 静态预览服务（任意根目录/端口） node references/preview-server.js [rootDir] [port] # Selenium 截图 + 区域裁剪 python references/verify_shot.py \ --url http://127.0.0.1:9099/your-preview.html \ --script "ztOpenTemplate('pinyin'); ztSetMode('inst');" \ --wait 5 --crop --out ./shots ``` ## preview.html 验证清单（8 项，全部通过才算"验证通过"） | # | 检查项 | 通过标准 | |---|--------|---------| | 1 | Canvas 正确渲染 | 打开 1 秒内非白屏 | | 2 | 网格线清晰 | 放大 200% 无毛边/锯齿 | | 3 | 文字居中 | 目测在格正中间，不偏 | | 4 | 参数切换即时生效 | 改任一参数 <500ms 重绘 | | 5 | 保存图片正常 | 下载 PNG 1240×1754、无变形 | | 6 | 颜色一致 | 与设计令牌色值一致 | | 7 | 控制台无���错 | F12 无红错（字体 404 可忽略） | | 8 | 重复生成一致性 | 同参数连出 3 次完全一致 | ## Canvas 常见坑（自动规避） | 坑 | 正确做法 | |----|----------| | 文字模糊 | `canvas.width = cssW * dpr`；`ctx.scale(dpr,dpr)`；先设 `ctx.font` | | 文字偏移 | 手动 `ctx.textBaseline='middle'` | | 线不直 | `lineWidth` 偶数、坐标整数 | | 导出空