Canvas 精通之路

先看清整条路，再去记 API

五岁的孩子可以看懂一幅画，但生产系统必须回答更多问题。画里的东西叫什么？谁可以移动它们？崩溃后能否恢复？看不见画布的人还能操作它吗？十万个对象同时存在时，它为什么依然流畅？三个人和一个 AI 同时编辑时，究竟听谁的？

这门课程就从这些问题开始。每一章都会先给你一个能够装进脑海的玩具世界，让你可以预测将会发生什么。然后，我们才把这个玩具翻译成正式术语、TypeScript 接口、浏览器行为与测试证据。类比绝不能冒充事实：每一章都会明确指出类比在哪个位置失效。

你将构建什么

你会持续扩展同一个教学项目 Canvas Lab，最终把它变成一个具备以下能力的可视化操作画布：

• 自定义业务形状、文字、图片、连接线与吸附；
• 键盘和屏幕阅读器替代操作；
• 历史记录、自动保存、崩溃恢复与版本迁移；
• 安全的资产生命周期，以及 PNG、SVG、JSON 和分块高分辨率导出；
• 可重复的几何、状态机、浏览器、视觉与性能测试；
• 只在证据确实支持时才启用 Worker 或 GPU 渲染；
• 可恢复的多人同步、离线队列与在线状态；
• 只能执行有边界、可预览、可撤销、可审计操作的 AI。

始终分开这三个层次

渲染同样有边界。DOM 保留文本编辑、语义和无障碍能力；Canvas 2D 驱动高频教学内核；只有基准测试证明存在收益时，GPU 渲染器才会加入。文档永远不依赖某一种渲染器，因此换一把画笔，无须把整本账簿撕掉重写。

每一章的学习循环

1. **摆弄一个玩具：**通过具体对象、动作和结果，建立可预测的心智模型。
2. **翻译它：**把每个玩具元素映射到工程概念，并标出类比的边界。
3. **消灭一个误解：**用最小反例揭示一种只在演示中成立的直觉。
4. **构建一项能力：**为 Canvas Lab 增加一项可运行、可测试的功能。
5. **故意让它出错：**记录症状、日志或追踪、根因、修复方案与回归测试。
6. **用证据验收：**能自动证明的就自动化；仍需人工验证的，则记录环境与验收标准。
7. **把它讲给别人：**不用术语解释规则，并把它迁移到一个新场景。

开始之前

课程中的所有示例都使用严格模式的 TypeScript。你需要现代浏览器、Node.js 22、一个包管理器、浏览器开发者工具，以及能够运行单元测试和浏览器测试的终端。涉及 React、tldraw、WebGPU 或浏览器兼容性的章节，会固定具体版本或注明验证日期。与时间相关的结论必须根据官方文档重新核验。

你无须预先了解矩阵、空间索引、CRDT 或着色器。只要始终做到三件事：先预测，亲手让系统出错，再用证据解释为什么修复有效。