技能介绍

问题：Canvas 改样式只能「凭感觉」

微信小程序里用 Canvas 画网格、排字帖时，改 lineWidth、字号或配色后，很难用肉眼稳定判断：格子是否歪了、文字是否偏格心、导出 PNG 是否变形、同参数连画三次是否一致。真机预览成本高，F12 里又容易漏掉字体加载或偶发重绘延迟。

这套工作流怎么做

本技能是工具模块：本地起一个静态预览服务（preview-server.js），用 Selenium 打开 preview.html，执行你指定的 JS（切模板、改参数），再截图；需要回归时还可按场景裁切顶部/中部/底部区域对比。

核心能力包括：

可复现截图：同一套参数与脚本，多次跑出来的画面应对齐八项清单
八项验证清单：从「1 秒内非白屏」到「同参数连出 3 次完全一致」，逐项有通过标准
常见坑对照表：如 canvas.width = cssW * dpr + ctx.scale(dpr,dpr) 防糊字、偶数线宽与整数坐标防线歪等
自测入口：selftest.py 启动服务并校验资源可访问，PASS 才说明链路可用

引用侧还有 verify_shot.py（截图与区域裁剪）、snap1.yml 场景示例、sample-preview.html 最小预览页，与业务代码解耦，任意 Canvas 预览页只要挂到同一服务即可接入。

边界与注意

verify_shot.py 依赖 Selenium、Pillow 和无头 Chrome，环境没配好时截图会失败，与小程序业务逻辑无关。本技能负责「看效果、做视觉回归」；画网格、SVG 复刻、多页 PDF 导出需配合同工具链里其它技能。控制台字体 404 在清单里可忽略，其它红错应视为未通过。