教程站导览

本站把浏览器里“画东西”的六套技术整理成一套文档式教程：HTML5、SVG、Canvas、WebGL、WebGL2、WebGPU。每个大板块的写法一致，你可以按顺序学，也可以当手册查。

站点结构

板块	关注点	核心关键词
HTML5	页面结构、表单、媒体与浏览器能力	语义化标签、约束校验、Web Storage、File API、ARIA
SVG	保留模式矢量图形	基础图形、path、viewBox、渐变滤镜、SMIL/CSS 动画
Canvas 2D	立即模式位图绘制	路径、样式、文本、图像、变换、像素、性能
WebGL 1.0	GPU 渲染入门	上下文、GLSL、缓冲区、矩阵、纹理、光照、深度
WebGL 2.0	现代 GPU 特性	GLSL ES 3.00、实例化、变换反馈、3D 纹理、MRT、UBO
WebGPU	新一代图形与计算	adapter/device、WGSL、渲染管线、计算管线、绑定组
图形学数学	把矩阵与坐标系搞懂（TypeScript）	坐标系、向量、矩阵、四元数、三角恒等式、微积分、插值、贝塞尔与曲线、几何图元与相交、颜色、噪声、对称图案
算法	复杂度与经典算法（TypeScript）	排序、查找、双指针、回溯、DP、图算法、图的自动布局、字符串、位运算
数据结构	该用哪个容器（TypeScript）	数组、链表、栈队列、哈希表、树、堆、Trie、并查集、线段树、LRU
前端程序设计模式	代码结构设计（TypeScript）	创建/结构/行为型模式、发布订阅、状态机、组件模式、架构、反模式
游戏物理	让物体动得对（TypeScript）	物理基础、力学、数值积分与固定步长、碰撞与冲量响应、2D/3D 刚体、粒子与约束
无限画布	做 Figma / MasterGo 类设计平台（TypeScript）	视口坐标、平移缩放、选择变换、矢量编辑、文本、标尺网格、吸附对齐、测量、图层、组件样式、自动布局、原型、撤销重做、版本与分支、评论权限、实时协作、交付导出、插件扩展、性能
API 速查	忘了名字时查签名	对象、方法、属性、常量、事件表 + 页面内筛选

教程 + 速查，两种用法

本站刻意分成两半，各自只做一件事：

板块	回答的问题	内容形态
六大教程板块	为什么这样设计、怎么写才对	概念讲解 + 可运行示例 + 常见坑
API 速查	这个东西叫什么、有哪些参数	按对象分组的方法/属性/常量/事件表 + 页面内即时筛选

遇到问题时的判断顺序：不知道选哪个技术 → 六大图形技术选型；知道用什么但忘了名字 → API 速查；会用但踩坑 → 对应教程页；想看能跑的完整代码 → 示例总览。

每一节的组织方式

一篇典型页面包含以下几个部分，方便“学”和“查”两种用途：

1. 概念与适用场景：这项能力解决什么问题，什么时候不该用它。
2. API 速查表：方法/属性签名、参数含义、返回值，用表格列出。
3. 可运行示例：页面上直接运行，旁边就是源码（examples/**/*.js 原样展示）。
4. 实战要点：坐标换算、性能边界、内存与生命周期。
5. 常见坑与排查：报错信息 → 原因 → 解决方式。

学习路径建议

路径 A：完全没有图形基础

HTML5 概览 → 语义化标签 → SVG 基础图形 → Canvas 图形与路径 → Canvas 动画。 这条路径强调“先有画面，再谈性能”。

路径 B：想搞懂 GPU 渲染

Canvas 上下文与高清屏（理解画布与像素） → WebGL 上下文 → GLSL 着色器 → 缓冲区与属性 → 矩阵与相机 → 纹理 → 光照 → 深度与 3D。

路径 C：从 WebGL 迁移到 WebGPU

WebGL2 概览 → 实例化渲染 → WebGPU 概览 → 适配器与设备 → WGSL → 渲染管线 → 计算管线。

关于在线示例

本站所有示例都遵循同一套约定，可以直接在文档里运行，也可以复制出来放到自己的项目里：

• 示例源码位于 docs/examples/<板块>/<名字>.js；
• 每个模块默认导出一个函数，参数是一个容器元素，返回值是清理函数；
• 页面中用 <LiveDemo src="canvas/shapes-paths" /> 引用，用 <<< @/examples/canvas/shapes-paths.js 展示源码。

具体契约、可用工具函数与写作规范见 在线示例与代码约定。

本地开发

pnpm install        # 安装依赖
pnpm dev            # 启动文档站（默认 http://localhost:5173）
pnpm build          # 构建静态站点到 docs/.vitepress/dist
pnpm preview        # 本地预览构建产物
pnpm check:demos    # 体检所有示例模块（能否被 import、是否导出函数）

技术栈：Vite（开发服务器与打包）+ VitePress（Markdown 驱动的文档框架，基于 Vue 3）+ 少量自定义主题组件（LiveDemo、DemoGallery）。