console.snapshot是canvas渲染调试核心工具，通过代理上下文方法捕获单帧完整调用链，并结合screenshot、image等辅助验证渲染结果与资源状态。

Canvas 渲染调试的关键，是把“看不见的绘制过程”变成“可观察、可追溯、可对比”的操作序列。核心不在于重绘本身，而在于厘清每一帧里 谁调用了什么方法、传了什么参数、在什么状态下执行。控制台不是只用来输出文字的地方，它是你和 Canvas 上下文之间的实时对话窗口。

用 console.snapshot 捕获单帧调用链

这个轻量工具能直接反映 Canvas 2D 上下文在一次 requestAnimationFrame 周期内的真实行为：

• 调用 console.snapshot(ctx) 会记录当前上下文所有已执行的绘图方法（如 fillRect、beginPath、stroke），并按调用顺序展示堆栈
• 它不依赖代码打点，而是通过代理 CanvasRenderingContext2D 原型方法实现拦截，因此能捕获第三方库或压缩代码中的隐式调用
• 特别适合排查“为什么这里没画出来”——比如 fillStyle 被意外覆盖、save()/restore() 不配对导致状态错乱

结合 screenshot 查看实际渲染结果

光看调用记录还不够，得对照像素输出验证是否符合预期：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• console.screenshot(canvas, 0.5) 生成缩略图，快速确认裁剪区域、缩放比例、透明度混合是否正常
• 如果发现某帧图像模糊或错位，但调用日志看起来没问题，大概率是 devicePixelRatio 未适配或 canvas.width/height 与 CSS 尺寸不一致
• 连续多次截图可辅助判断动画卡顿是否源于某次异常大的绘制面积（例如误将 clearRect(0,0,9999,9999) 写死）

用 image 辅助比对资源加载状态

Canvas 绘制常依赖图片、字体等外部资源，异步加载失败容易静默丢帧：

• console.image(img.src) 可直接在控制台预览图片是否加载成功、尺寸是否符合预期
• 配合 img.onload 和 img.onerror，在加载完成时立即调用，避免因资源未就绪导致的空白绘制
• 若使用 drawImage 但画面无反应，先用 console.image 确认图片对象有效，再检查是否在 onload 外调用了绘制

搭配 Motion Canvas 的 profile 定位耗时环节

当需要深入性能瓶颈而非单纯验证逻辑时，结构化时间标记更高效：

• 在关键路径起始处调用 this.logger.profile('render-frame')
• 在绘制循环末尾再次调用同名 profile，自动计算耗时并归类到“渲染帧”标签下
• 可嵌套使用，例如在 render-frame 内标记 update-particles 和 draw-grid，快速识别哪部分拖慢整体帧率